'use client'

import React, { useState, useEffect, useCallback } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useTheme } from '@/lib/ThemeContext'
import { FlashCard } from '@/components/learn/FlashCard'
import { AudioButton } from '@/components/learn/AudioButton'

interface QAItem {
  id: string
  question: string
  answer: string
  leitner_box: number
  correct_count: number
  incorrect_count: number
}

function getBackendUrl() {
  if (typeof window === 'undefined') return 'http://localhost:8001'
  const { hostname, protocol } = window.location
  if (hostname === 'localhost') return 'http://localhost:8001'
  return `${protocol}//${hostname}:8001`
}

export default function FlashcardsPage() {
  const { unitId } = useParams<{ unitId: string }>()
  const router = useRouter()
  const { isDark } = useTheme()

  const [items, setItems] = useState<QAItem[]>([])
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  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(() => {
    loadQA()
  }, [unitId])

  const loadQA = async () => {
    setIsLoading(true)
    try {
      const resp = await fetch(`${getBackendUrl()}/api/learning-units/${unitId}/qa`)
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
      const data = await resp.json()
      setItems(data.qa_items || [])
    } catch (err: any) {
      setError(err.message)
    } finally {
      setIsLoading(false)
    }
  }

  const handleAnswer = useCallback(async (correct: boolean) => {
    const item = items[currentIndex]
    if (!item) return

    // Update Leitner progress
    try {
      await fetch(
        `${getBackendUrl()}/api/learning-units/${unitId}/leitner/update?item_id=${item.id}&correct=${correct}`,
        { method: 'POST' }
      )
    } catch (err) {
      console.error('Leitner update failed:', err)
    }

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

    if (currentIndex + 1 >= items.length) {
      setIsComplete(true)
    } else {
      setCurrentIndex((i) => i + 1)
    }
  }, [items, currentIndex, unitId])

  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-blue-50 to-cyan-100'}`}>
        <div className={`w-8 h-8 border-4 ${isDark ? 'border-blue-400' : 'border-blue-600'} border-t-transparent rounded-full animate-spin`} />
      </div>
    )
  }

  if (error) {
    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-blue-50 to-cyan-100'}`}>
        <div className={`${glassCard} rounded-2xl p-8 text-center max-w-md`}>
          <p className={isDark ? 'text-red-300' : 'text-red-600'}>Fehler: {error}</p>
          <button onClick={() => router.push('/learn')} className="mt-4 px-4 py-2 rounded-xl bg-blue-500 text-white text-sm">
            Zurueck
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100'}`}>
      {/* 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'}`}>
            Karteikarten
          </h1>
          <span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
            {items.length} Karten
          </span>
        </div>
      </div>

      {/* Content */}
      <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`}>
            <div className="text-5xl mb-4">
              {stats.correct > stats.incorrect ? '🎉' : '💪'}
            </div>
            <h2 className={`text-2xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
              Geschafft!
            </h2>
            <div className={`flex justify-center gap-8 mb-6 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
              <div>
                <span className="text-3xl font-bold text-green-500">{stats.correct}</span>
                <p className="text-sm mt-1">Richtig</p>
              </div>
              <div>
                <span className="text-3xl font-bold text-red-500">{stats.incorrect}</span>
                <p className="text-sm mt-1">Falsch</p>
              </div>
            </div>
            <div className="flex gap-3">
              <button
                onClick={() => { setCurrentIndex(0); setStats({ correct: 0, incorrect: 0 }); setIsComplete(false); loadQA() }}
                className="flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-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>
        ) : items.length > 0 ? (
          <div className="w-full max-w-lg">
            <FlashCard
              front={items[currentIndex].question}
              back={items[currentIndex].answer}
              cardNumber={currentIndex + 1}
              totalCards={items.length}
              leitnerBox={items[currentIndex].leitner_box}
              onCorrect={() => handleAnswer(true)}
              onIncorrect={() => handleAnswer(false)}
              isDark={isDark}
            />
            {/* Audio Button */}
            <div className="flex justify-center mt-4">
              <AudioButton text={items[currentIndex].question} lang="en" isDark={isDark} />
            </div>
          </div>
        ) : (
          <div className={`${glassCard} rounded-2xl p-8 text-center`}>
            <p className={isDark ? 'text-white/60' : 'text-slate-500'}>Keine Karteikarten verfuegbar.</p>
          </div>
        )}
      </div>
    </div>
  )
}