import { useState } from 'react'
import { SubtitleWord, MOCK_FLASHCARD_SETS } from '@/lib/mockData'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
import { X, Plus, Check } from 'lucide-react'
import { SimpleSelect } from '@/components/ui/select'

interface WordInspectorProps {
    word: SubtitleWord
    onClose: () => void
    onAdd: (original: string, translation: string, setId: string) => void
}

export const WordInspector = ({ word, onClose, onAdd }: WordInspectorProps) => {
    const [translation, setTranslation] = useState('')
    const [selectedSet, setSelectedSet] = useState<string>(MOCK_FLASHCARD_SETS[0]?.id || '')

    const handleAdd = () => {
        if (!translation) return
        onAdd(word.text, translation, selectedSet)
        onClose()
    }

    return (
        <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-[2px]">
            <Card className="w-[320px] shadow-2xl animate-in zoom-in-95 duration-200">
                <CardHeader className="flex flex-row items-center justify-between pb-2">
                    <CardTitle className="text-xl font-mono font-bold text-primary">
                        {word.text}
                    </CardTitle>
                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
                        <X className="w-4 h-4" />
                    </Button>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="space-y-2">
                        <label className="text-xs text-muted-foreground uppercase font-bold tracking-wider">
                            Translation
                        </label>
                        <Input
                            value={translation}
                            onChange={(e) => setTranslation(e.target.value)}
                            placeholder="Enter meaning..."
                            autoFocus
                        />
                    </div>

                    <div className="space-y-2">
                        <label className="text-xs text-muted-foreground uppercase font-bold tracking-wider">
                            Add to Set
                        </label>
                        <SimpleSelect value={selectedSet} onValueChange={setSelectedSet}>
                            <option value="" disabled>Select deck</option>
                            {MOCK_FLASHCARD_SETS.map(set => (
                                <option key={set.id} value={set.id}>{set.title}</option>
                            ))}
                        </SimpleSelect>
                    </div>
                </CardContent>
                <CardFooter>
                    <Button className="w-full" disabled={!translation} onClick={handleAdd}>
                        <Plus className="w-4 h-4 mr-2" /> Add Flashcard
                    </Button>
                </CardFooter>
            </Card>
        </div>
    )
}
