'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { ProgressRing } from '@/components/gamification/ProgressRing'
import { CrownBadge } from '@/components/gamification/CrownBadge'

interface UnitProgress {
  unit_id: string
  coins: number
  crowns: number
  streak_days: number
  last_activity: string | null
  exercises: {
    flashcards?: { completed: number; correct: number; incorrect: number }
    quiz?: { completed: number; correct: number; incorrect: number }
    type?: { completed: number; correct: number; incorrect: number }
    story?: { generated: number }
  }
}

interface LearningUnit {
  id: string
  label: string
  meta: string
  status: string
}

interface LearningProgressProps {
  isDark: boolean
  glassCard: string
}

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 function LearningProgress({ isDark, glassCard }: LearningProgressProps) {
  const [units, setUnits] = useState<LearningUnit[]>([])
  const [progress, setProgress] = useState<UnitProgress[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    loadData()
  }, [])

  const loadData = async () => {
    setIsLoading(true)
    try {
      const [unitsResp, progressResp] = await Promise.all([
        fetch(`${getBackendUrl()}/api/learning-units/`),
        fetch(`${getBackendUrl()}/api/progress/`),
      ])

      if (unitsResp.ok) setUnits(await unitsResp.json())
      if (progressResp.ok) setProgress(await progressResp.json())
    } catch (err) {
      console.error('Failed to load learning data:', err)
    } finally {
      setIsLoading(false)
    }
  }

  const totalCoins = progress.reduce((sum, p) => sum + (p.coins || 0), 0)
  const totalCrowns = progress.reduce((sum, p) => sum + (p.crowns || 0), 0)
  const maxStreak = Math.max(0, ...progress.map((p) => p.streak_days || 0))

  const totalCorrect = progress.reduce((sum, p) => {
    const ex = p.exercises || {}
    return sum +
      (ex.flashcards?.correct || 0) +
      (ex.quiz?.correct || 0) +
      (ex.type?.correct || 0)
  }, 0)

  const totalAnswered = progress.reduce((sum, p) => {
    const ex = p.exercises || {}
    return sum +
      (ex.flashcards?.completed || 0) +
      (ex.quiz?.completed || 0) +
      (ex.type?.completed || 0)
  }, 0)

  const accuracy = totalAnswered > 0 ? Math.round((totalCorrect / totalAnswered) * 100) : 0

  if (isLoading) {
    return (
      <div className={`${glassCard} rounded-2xl p-6`}>
        <div className="flex items-center justify-center py-8">
          <div className={`w-6 h-6 border-2 ${isDark ? 'border-blue-400' : 'border-blue-600'} border-t-transparent rounded-full animate-spin`} />
        </div>
      </div>
    )
  }

  if (units.length === 0) {
    return (
      <div className={`${glassCard} rounded-2xl p-6`}>
        <h3 className={`text-lg font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Lernfortschritt
        </h3>
        <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
          Noch keine Lernmodule vorhanden.
        </p>
        <Link
          href="/vocab-worksheet"
          className={`inline-block mt-3 text-sm font-medium ${isDark ? 'text-blue-300 hover:text-blue-200' : 'text-blue-600 hover:text-blue-700'}`}
        >
          Vokabeln scannen →
        </Link>
      </div>
    )
  }

  return (
    <div className={`${glassCard} rounded-2xl p-6`}>
      <div className="flex items-center justify-between mb-4">
        <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Lernfortschritt
        </h3>
        <Link
          href="/learn"
          className={`text-sm font-medium ${isDark ? 'text-blue-300 hover:text-blue-200' : 'text-blue-600 hover:text-blue-700'}`}
        >
          Alle Module →
        </Link>
      </div>

      {/* Stats Row */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        <ProgressRing
          progress={accuracy}
          size={64}
          strokeWidth={5}
          label="Genauigkeit"
          value={`${accuracy}%`}
          color="#22c55e"
          isDark={isDark}
        />
        <div className="flex flex-col items-center gap-1">
          <span className="text-2xl">🪙</span>
          <span className={`text-lg font-bold ${isDark ? 'text-yellow-300' : 'text-yellow-600'}`}>{totalCoins}</span>
          <span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Muenzen</span>
        </div>
        <div className="flex flex-col items-center gap-1">
          <CrownBadge crowns={totalCrowns} size="md" showLabel={false} />
          <span className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{totalCrowns}</span>
          <span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Kronen</span>
        </div>
        <div className="flex flex-col items-center gap-1">
          <span className="text-2xl">🔥</span>
          <span className={`text-lg font-bold ${isDark ? 'text-orange-300' : 'text-orange-600'}`}>{maxStreak}</span>
          <span className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Tage-Streak</span>
        </div>
      </div>

      {/* Unit List */}
      <div className="space-y-2">
        {units.slice(0, 3).map((unit) => {
          const unitProgress = progress.find((p) => p.unit_id === unit.id)
          const unitCorrect = unitProgress
            ? (unitProgress.exercises?.flashcards?.correct || 0) +
              (unitProgress.exercises?.quiz?.correct || 0) +
              (unitProgress.exercises?.type?.correct || 0)
            : 0
          const unitTotal = unitProgress
            ? (unitProgress.exercises?.flashcards?.completed || 0) +
              (unitProgress.exercises?.quiz?.completed || 0) +
              (unitProgress.exercises?.type?.completed || 0)
            : 0

          return (
            <Link
              key={unit.id}
              href={`/learn/${unit.id}/flashcards`}
              className={`flex items-center justify-between p-3 rounded-xl transition-colors ${
                isDark ? 'hover:bg-white/5' : 'hover:bg-slate-50'
              }`}
            >
              <div>
                <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  {unit.label}
                </span>
                <span className={`text-xs ml-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                  {unitTotal > 0 ? `${unitCorrect}/${unitTotal} richtig` : 'Noch nicht geubt'}
                </span>
              </div>
              <svg className={`w-4 h-4 ${isDark ? 'text-white/30' : 'text-slate-300'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </Link>
          )
        })}
      </div>
    </div>
  )
}