import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
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 } from '@/lib/mockData'

interface FlipCardProps {
    card: Flashcard
    onResult: (correct: boolean) => void
    dataClass?: string // For future theming support
}

export const FlipCard = ({ card, onResult }: FlipCardProps) => {
    const [isFlipped, setIsFlipped] = useState(false)
    const [showResult, setShowResult] = useState(false)

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

    const variants = {
        front: { rotateY: 0 },
        back: { rotateY: 180 },
    }

    return (
        <div className="flex flex-col items-center gap-8 w-full max-w-xl mx-auto perspective-1000">
            <div
                className="relative h-[400px] w-full cursor-pointer perspective-1000"
                onClick={handleFlip}
            >
                <motion.div
                    className="w-full h-full relative preserve-3d"
                    initial="front"
                    animate={isFlipped ? "back" : "front"}
                    variants={variants}
                    transition={{ type: "spring", stiffness: 260, damping: 20 }}
                    style={{ transformStyle: "preserve-3d" }}
                >
                    {/* Front */}
                    <div
                        className="absolute inset-0 w-full h-full backface-hidden"
                        style={{ backfaceVisibility: 'hidden' }}
                    >
                        <Card className="h-full w-full flex items-center justify-center p-8 border-2 border-primary/20 hover:border-primary/50 transition-colors shadow-2xl bg-card">
                            <CardContent>
                                <h2 className="text-4xl font-bold text-center text-primary">{card.front}</h2>
                                <p className="mt-8 text-center text-muted-foreground text-xs uppercase tracking-[0.2em] font-bold">Question</p>
                            </CardContent>
                        </Card>
                    </div>

                    {/* Back */}
                    <div
                        className="absolute inset-0 w-full h-full backface-hidden"
                        style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}
                    >
                        <Card className="h-full w-full flex items-center justify-center p-8 border-2 border-primary shadow-2xl bg-primary/5">
                            <CardContent>
                                <h2 className="text-4xl font-bold text-center text-primary">{card.back}</h2>
                                <p className="mt-8 text-center text-muted-foreground text-xs uppercase tracking-[0.2em] font-bold">Answer</p>
                            </CardContent>
                        </Card>
                    </div>
                </motion.div>
            </div>

            <AnimatePresence mode="wait">
                {showResult ? (
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 20 }}
                        className="flex gap-4"
                    >
                        <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 font-bold"
                            onClick={(e) => {
                                e.stopPropagation()
                                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 font-bold shadow-lg shadow-green-600/20"
                            onClick={(e) => {
                                e.stopPropagation()
                                setIsFlipped(false)
                                setShowResult(false)
                                onResult(true)
                            }}
                        >
                            <Check className="w-5 h-5" />
                            Correct
                        </Button>
                    </motion.div>
                ) : (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        className="h-12 flex items-center text-muted-foreground text-sm font-medium"
                    >
                        <RotateCw className="w-4 h-4 mr-2 animate-spin-slow" />
                        Click card to flip
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    )
}
