import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import { PromptHint } from '../types';
import { Button } from './ui/Button';

const promptHints: PromptHint[] = [
  {
    category: 'subject',
    text: 'Be specific about the main subject',
    example: '"A vintage red bicycle" vs "bicycle"'
  },
  {
    category: 'scene',
    text: 'Describe the environment and setting',
    example: '"in a cobblestone alley during golden hour"'
  },
  {
    category: 'action',
    text: 'Include movement or activity',
    example: '"cyclist pedaling through puddles"'
  },
  {
    category: 'style',
    text: 'Specify artistic style or mood',
    example: '"cinematic photography, moody lighting"'
  },
  {
    category: 'camera',
    text: 'Add camera perspective details',
    example: '"shot with 85mm lens, shallow depth of field"'
  }
];

const categoryColors = {
  subject: 'bg-blue-500/10 border-blue-500/30 text-blue-400',
  scene: 'bg-green-500/10 border-green-500/30 text-green-400',
  action: 'bg-purple-500/10 border-purple-500/30 text-purple-400',
  style: 'bg-orange-500/10 border-orange-500/30 text-orange-400',
  camera: 'bg-pink-500/10 border-pink-500/30 text-pink-400',
};

interface PromptHintsProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export const PromptHints: React.FC<PromptHintsProps> = ({ open, onOpenChange }) => {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/30 z-50 animate-in fade-in duration-200" />
        <Dialog.Content className="fixed inset-0 m-auto w-full max-w-md h-fit max-h-[80vh] overflow-y-auto bg-white border border-gray-200 rounded-lg p-6 z-50 animate-in scale-in duration-200">
          <div className="flex items-center justify-between mb-4">
            <Dialog.Title className="text-lg font-semibold text-gray-900">
              提示质量技巧
            </Dialog.Title>
            <Dialog.Close asChild>
              <Button variant="ghost" size="icon" className="h-6 w-6">
                <X className="h-4 w-4" />
              </Button>
            </Dialog.Close>
          </div>
          
          <div className="space-y-4">
            {promptHints.map((hint, index) => (
              <div key={index} className="space-y-2">
                <div className={`inline-block px-2 py-1 rounded text-xs border ${categoryColors[hint.category]}`}>
                  {hint.category}
                </div>
                <p className="text-sm text-gray-700">{hint.text}</p>
                <p className="text-sm text-gray-500 italic">{hint.example}</p>
              </div>
            ))}
            
            <div className="p-4 bg-gray-100 rounded-lg border border-gray-200 mt-6">
              <p className="text-sm text-gray-700">
                <strong className="text-yellow-600">最佳实践:</strong> 写完整的句子来描述整个场景，
                而不仅仅是关键词。想象"用文字为我画一幅画"。
              </p>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};