import { useParams, useNavigate } from 'react-router'
import { useFlashcardSet } from '@/features/flashcards/api/queries'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { RotateCw, PenTool, List, ArrowLeft, Volume2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Loader2 } from 'lucide-react'

export const SetOverviewPage = () => {
    const { setId } = useParams()
    const navigate = useNavigate()
    const { data: set, isLoading } = useFlashcardSet(setId || '')

    if (isLoading) return <div className="flex justify-center items-center h-full"><Loader2 className="w-8 h-8 animate-spin" /></div>

    if (!set) {
        return <div className="p-8">Set not found</div>
    }

    return (
        <div className="p-8 max-w-4xl mx-auto">
            <Button
                variant="ghost"
                className="mb-6 -ml-4 text-muted-foreground hover:text-foreground"
                onClick={() => navigate('/flashcards')}
            >
                <ArrowLeft className="w-4 h-4 mr-2" /> Back to Sets
            </Button>

            <div className={cn("rounded-3xl p-8 text-white mb-8 bg-gradient-to-r shadow-xl", set.color)}>
                <h1 className="text-4xl font-bold mb-2">{set.title}</h1>
                <p className="opacity-90 text-lg">{set.topic} • {set.cards?.length || 0} Cards</p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <Card
                    className="cursor-pointer hover:border-primary transition-colors hover:shadow-md"
                    onClick={() => navigate(`/flashcards/${set.id}/study`)}
                >
                    <CardContent className="p-6 flex flex-col items-center text-center gap-4 pt-10">
                        <div className="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center">
                            <RotateCw className="w-8 h-8" />
                        </div>
                        <div>
                            <h3 className="text-xl font-bold mb-1">Flashcards</h3>
                            <p className="text-sm text-muted-foreground">Traditional flip mode</p>
                        </div>
                    </CardContent>
                </Card>

                <Card
                    className="cursor-pointer hover:border-primary transition-colors hover:shadow-md"
                    onClick={() => navigate(`/flashcards/${set.id}/transcription`)}
                >
                    <CardContent className="p-6 flex flex-col items-center text-center gap-4 pt-10">
                        <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 flex items-center justify-center">
                            <Volume2 className="w-8 h-8" />
                        </div>
                        <div>
                            <h3 className="text-xl font-bold mb-1">Listening</h3>
                            <p className="text-sm text-muted-foreground">Type what you hear</p>
                        </div>
                    </CardContent>
                </Card>

                <Card
                    className="cursor-pointer hover:border-primary transition-colors hover:shadow-md"
                    onClick={() => navigate(`/flashcards/${set.id}/spelling`)}
                >
                    <CardContent className="p-6 flex flex-col items-center text-center gap-4 pt-10">
                        <div className="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center justify-center">
                            <PenTool className="w-8 h-8" />
                        </div>
                        <div>
                            <h3 className="text-xl font-bold mb-1">Spelling Mode</h3>
                            <p className="text-sm text-muted-foreground">Type what you hear/see</p>
                        </div>
                    </CardContent>
                </Card>

                <Card
                    className="cursor-pointer hover:border-primary transition-colors hover:shadow-md"
                    onClick={() => navigate(`/flashcards/${set.id}/list`)}
                >
                    <CardContent className="p-6 flex flex-col items-center text-center gap-4 pt-10">
                        <div className="w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 flex items-center justify-center">
                            <List className="w-8 h-8" />
                        </div>
                        <div>
                            <h3 className="text-xl font-bold mb-1">Card List</h3>
                            <p className="text-sm text-muted-foreground">View and manage cards</p>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}
