'use client'

import React, { useState, useEffect, useCallback, useMemo } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useTheme } from '@/lib/ThemeContext'
import { useNativeLanguage } from '@/lib/useNativeLanguage'
import { AudioButton } from '@/components/learn/AudioButton'
import { StarRating, accuracyToStars } from '@/components/gamification/StarRating'

interface QAItem { id: string; question: string; answer: string }

function getApiBase() { return '' }

export default function ListenPage() {
  const { unitId } = useParams<{ unitId: string }>()
  const router = useRouter()
  const { isDark } = useTheme()
  const { t, wordInNative, nativeLang, isThirdLanguage } = useNativeLanguage()

  const [items, setItems] = useState<QAItem[]>([])
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [selected, setSelected] = useState<string | null>(null)
  const [revealed, setRevealed] = useState(false)
  const [stats, setStats] = useState({ correct: 0, incorrect: 0 })
  const [isComplete, setIsComplete] = useState(false)

  const glassCard = isDark
    ? 'bg-white/10 backdrop-blur-xl border border-white/10'
    : 'bg-white/80 backdrop-blur-xl border border-black/5'

  useEffect(() => {
    (async () => {
      try {
        const resp = await fetch(`${getApiBase()}/api/learning-units/${unitId}/qa`)
        if (resp.ok) { const d = await resp.json(); setItems(d.qa_items || []) }
      } catch {} finally { setIsLoading(false) }
    })()
  }, [unitId])

  // Generate 4 options (1 correct + 3 distractors)
  const options = useMemo(() => {
    if (!items.length || currentIndex >= items.length) return []
    const correct = items[currentIndex]
    const others = items.filter((_, i) => i !== currentIndex)
    const shuffled = [...others].sort(() => Math.random() - 0.5).slice(0, 3)
    const opts = [...shuffled.map(i => ({ id: i.id, text: i.answer })), { id: correct.id, text: correct.answer }]
    return opts.sort(() => Math.random() - 0.5)
  }, [items, currentIndex])

  const handleSelect = useCallback((optionId: string) => {
    if (revealed) return
    setSelected(optionId)
    setRevealed(true)
    const isCorrect = optionId === items[currentIndex].id

    setStats(prev => ({
      correct: prev.correct + (isCorrect ? 1 : 0),
      incorrect: prev.incorrect + (isCorrect ? 0 : 1),
    }))

    setTimeout(() => {
      if (currentIndex + 1 >= items.length) { setIsComplete(true) }
      else { setCurrentIndex(i => i + 1) }
      setSelected(null)
      setRevealed(false)
    }, isCorrect ? 800 : 2000)
  }, [revealed, items, currentIndex])

  if (isLoading) {
    return <div className={`min-h-screen flex items-center justify-center ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-green-50 to-emerald-100'}`}>
      <div className="w-8 h-8 border-4 border-green-400 border-t-transparent rounded-full animate-spin" />
    </div>
  }

  const currentItem = items[currentIndex]

  return (
    <>
      {/* Header */}
      <div className={`${glassCard} border-0 border-b`}>
        <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
          <button onClick={() => router.push('/learn')} className={`flex items-center gap-2 text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'}`}>
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
            Zurueck
          </button>
          <h1 className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>Hoerverstehen</h1>
          <span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{currentIndex + 1}/{items.length}</span>
        </div>
      </div>

      {/* Progress */}
      <div className="w-full h-1 bg-white/10">
        <div className="h-full bg-gradient-to-r from-green-500 to-emerald-500 transition-all" style={{ width: `${(currentIndex / Math.max(items.length, 1)) * 100}%` }} />
      </div>

      <div className="flex-1 flex items-center justify-center px-6 py-8">
        {isComplete ? (
          <div className={`${glassCard} rounded-3xl p-10 text-center max-w-md w-full`}>
            <StarRating stars={accuracyToStars(stats.correct, stats.correct + stats.incorrect)} size="lg" animated />
            <h2 className={`text-2xl font-bold mt-4 mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Geschafft!</h2>
            <p className={`text-lg mb-6 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>{stats.correct}/{stats.correct + stats.incorrect} richtig</p>
            <div className="flex gap-3">
              <button onClick={() => { setCurrentIndex(0); setStats({ correct: 0, incorrect: 0 }); setIsComplete(false) }} className="flex-1 py-3 rounded-xl bg-gradient-to-r from-green-500 to-emerald-500 text-white font-medium">Nochmal</button>
              <button onClick={() => router.push('/learn')} className={`flex-1 py-3 rounded-xl border font-medium ${isDark ? 'border-white/20 text-white/80' : 'border-slate-300 text-slate-700'}`}>Zurueck</button>
            </div>
          </div>
        ) : currentItem ? (
          <div className="w-full max-w-lg space-y-6">
            {/* Audio prompt */}
            <div className={`${glassCard} rounded-3xl p-8 text-center`}>
              <p className={`text-sm mb-4 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Hoere das Wort und waehle die richtige Uebersetzung</p>
              <AudioButton text={currentItem.question} lang="en" isDark={isDark} size="lg" />
              <p className={`text-sm mt-4 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>Tippe auf den Lautsprecher</p>
            </div>

            {/* Options */}
            <div className="grid grid-cols-2 gap-3">
              {options.map(opt => {
                const isCorrectAnswer = opt.id === currentItem.id
                const isSelected = selected === opt.id
                let style = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-200 text-slate-900'
                if (revealed && isCorrectAnswer) style = isDark ? 'bg-green-500/30 border-green-400 text-green-200' : 'bg-green-50 border-green-500 text-green-800'
                if (revealed && isSelected && !isCorrectAnswer) style = isDark ? 'bg-red-500/30 border-red-400 text-red-200' : 'bg-red-50 border-red-500 text-red-800'

                return (
                  <button key={opt.id} onClick={() => handleSelect(opt.id)} disabled={revealed}
                    className={`p-4 rounded-xl border-2 text-center font-medium transition-all ${style}`}>
                    {opt.text}
                  </button>
                )
              })}
            </div>
          </div>
        ) : null}
      </div>
    </>
  )
}
