import { useState, useRef, useEffect } from 'react'
import { MOCK_TRANSCRIPTION_TASKS } from '@/lib/mockData'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Play, Pause, Check, SkipForward, AlertCircle } from 'lucide-react'
import { cn } from '@/lib/utils'

export const TranscriptionPage = () => {
    const [taskIndex, setTaskIndex] = useState(0)
    const [userInput, setUserInput] = useState('')
    const [isPlaying, setIsPlaying] = useState(false)
    const [result, setResult] = useState<'correct' | 'incorrect' | null>(null)
    const task = MOCK_TRANSCRIPTION_TASKS[taskIndex]

    // Mock audio play logic
    useEffect(() => {
        let timeout: NodeJS.Timeout
        if (isPlaying) {
            timeout = setTimeout(() => setIsPlaying(false), 2000) // Mock 2s audio
        }
        return () => clearTimeout(timeout)
    }, [isPlaying])

    const checkAnswer = () => {
        const isCorrect = userInput.toLowerCase().trim() === task.text.toLowerCase().trim()
        setResult(isCorrect ? 'correct' : 'incorrect')
    }

    const nextTask = () => {
        if (taskIndex < MOCK_TRANSCRIPTION_TASKS.length - 1) {
            setTaskIndex(taskIndex + 1)
            setUserInput('')
            setResult(null)
        }
    }

    return (
        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] p-8 max-w-2xl mx-auto">
            <h1 className="text-3xl font-bold mb-8">Transcription Practice</h1>

            <Card className="w-full mb-8 border-2">
                <CardContent className="p-8 flex flex-col items-center gap-6">
                    <div className="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <Button
                            variant="outline"
                            size="icon"
                            className="w-16 h-16 rounded-full border-4 border-primary text-primary hover:bg-primary hover:text-white transition-all scale-100 hover:scale-105 active:scale-95"
                            onClick={() => setIsPlaying(!isPlaying)}
                        >
                            {isPlaying ? <Pause className="w-8 h-8" /> : <Play className="w-8 h-8 ml-1" />}
                        </Button>
                    </div>

                    <p className="text-muted-foreground text-center">
                        Listen to the audio and type what you hear.
                    </p>

                    <div className="w-full space-y-4">
                        <Input
                            value={userInput}
                            onChange={(e) => setUserInput(e.target.value)}
                            placeholder="Type Norwegian text here..."
                            className="text-lg p-6 h-auto text-center"
                            disabled={result === 'correct'}
                        />

                        <div className="flex justify-center gap-4">
                            {result === null && (
                                <Button onClick={checkAnswer} size="lg" className="w-full">
                                    Check Answer
                                </Button>
                            )}

                            {result === 'incorrect' && (
                                <Button onClick={checkAnswer} variant="destructive" size="lg" className="w-full">
                                    Try Again
                                </Button>
                            )}

                            {result === 'correct' && (
                                <Button onClick={nextTask} variant="default" size="lg" className="w-full bg-green-600 hover:bg-green-700">
                                    Next Challenge <SkipForward className="ml-2 w-4 h-4" />
                                </Button>
                            )}
                        </div>
                    </div>
                </CardContent>
            </Card>

            {result === 'incorrect' && (
                <div className="flex items-center gap-2 text-red-500 animate-in slide-in-from-top-2">
                    <AlertCircle className="w-5 h-5" />
                    <span>Incorrect, try listening again!</span>
                </div>
            )}

            {result === 'correct' && (
                <div className="flex flex-col items-center gap-2 text-green-600 animate-in slide-in-from-top-2">
                    <div className="flex items-center gap-2 font-bold mb-2">
                        <Check className="w-6 h-6" />
                        <span>Correct!</span>
                    </div>
                    <p className="text-muted-foreground">Translation: {task.translation}</p>
                </div>
            )}
        </div>
    )
}
