import { useState } from 'react'
import { cn } from '@/lib/utils'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Check, X, RotateCw } from 'lucide-react'
import type { Flashcard as FlashcardType } from '@/lib/mockData'

interface FlashcardProps {
    card: FlashcardType
    onResult: (correct: boolean) => void
}

export function Flashcard({ card, onResult }: FlashcardProps) {
    const [isFlipped, setIsFlipped] = useState(false)
    const [showResult, setShowResult] = useState(false)

    const handleFlip = () => {
        setIsFlipped(!isFlipped)
        if (!isFlipped) {
            setShowResult(true)
        }
    }

    return (
        <div className="flex flex-col items-center gap-8 w-full max-w-xl mx-auto">
            <div
                className="group h-[400px] w-full [perspective:1000px] cursor-pointer"
                onClick={handleFlip}
            >
                <div
                    className={cn(
                        "relative h-full w-full rounded-xl transition-all duration-500 [transform-style:preserve-3d]",
                        isFlipped ? "[transform:rotateY(180deg)]" : ""
                    )}
                >
                    {/* Front */}
                    <Card className="absolute h-full w-full [backface-visibility:hidden] flex items-center justify-center p-8 border-2 border-primary/20 hover:border-primary/50 transition-colors shadow-lg">
                        <CardContent>
                            <h2 className="text-4xl font-bold text-center text-primary">{card.front}</h2>
                            <p className="mt-4 text-center text-muted-foreground text-sm uppercase tracking-widest font-semibold">Question</p>
                        </CardContent>
                    </Card>

                    {/* Back */}
                    <Card className="absolute h-full w-full [transform:rotateY(180deg)] [backface-visibility:hidden] flex items-center justify-center p-8 border-2 border-primary shadow-lg bg-accent/5">
                        <CardContent>
                            <h2 className="text-4xl font-bold text-center text-primary">{card.back}</h2>
                            <p className="mt-4 text-center text-muted-foreground text-sm uppercase tracking-widest font-semibold">Answer</p>
                        </CardContent>
                    </Card>
                </div>
            </div>

            {showResult && (
                <div className="flex gap-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
                    <Button
                        variant="outline"
                        size="lg"
                        className="w-32 border-red-500 hover:bg-red-500/10 hover:text-red-500 text-red-500 gap-2"
                        onClick={() => {
                            setIsFlipped(false)
                            setShowResult(false)
                            onResult(false)
                        }}
                    >
                        <X className="w-5 h-5" />
                        Incorrect
                    </Button>
                    <Button
                        size="lg"
                        className="w-32 bg-green-600 hover:bg-green-700 text-white gap-2"
                        onClick={() => {
                            setIsFlipped(false)
                            setShowResult(false)
                            onResult(true)
                        }}
                    >
                        <Check className="w-5 h-5" />
                        Correct
                    </Button>
                </div>
            )}

            {!showResult && (
                <div className="h-12 flex items-center text-muted-foreground text-sm">
                    <RotateCw className="w-4 h-4 mr-2" />
                    Click card to flip
                </div>
            )}
        </div>
    )
}
