"use client"

import { useEffect, useState } from "react"
import { useAuth } from "@/lib/auth"
import { apiFetch, IDashboardStats } from "@/lib/api"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DashboardSkeleton } from "@/components/ui/skeletons"
import { FadeIn, StaggeredList, listItemVariants, CardHover } from "@/components/ui/animations"
import { motion } from "framer-motion"
import { Users, UserCog, CalendarDays, BookOpen, TrendingUp, Trophy } from "lucide-react"
import { Badge } from "@/components/ui/badge"

const groupConfig = {
  kids: { label: "Kinder", color: "bg-blue-500", bgColor: "bg-blue-500/10", textColor: "text-blue-500" },
  youth: { label: "Jugend", color: "bg-purple-500", bgColor: "bg-purple-500/10", textColor: "text-purple-500" },
  adults: { label: "Erwachsene", color: "bg-orange-500", bgColor: "bg-orange-500/10", textColor: "text-orange-500" },
  inactive: { label: "Inaktiv", color: "bg-gray-400", bgColor: "bg-gray-400/10", textColor: "text-gray-500" },
}

const groupOrder = ["kids", "youth", "adults", "inactive"] as const

export default function DashboardPage() {
  const { token, user } = useAuth()
  const [stats, setStats] = useState<IDashboardStats | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    if (!token) return

    const fetchStats = async () => {
      setIsLoading(true)
      try {
        const data = await apiFetch<IDashboardStats>('/stats/dashboard/', { token })
        setStats(data)
      } catch (error) {
        console.error("Failed to fetch stats:", error)
      } finally {
        setIsLoading(false)
      }
    }
    fetchStats()
  }, [token])

  if (isLoading) {
    return <DashboardSkeleton />
  }

  const maxActivity = stats?.activity ? Math.max(...stats.activity.map(a => a.count), 1) : 1

  return (
    <div className="space-y-8">
      <FadeIn>
        <div className="space-y-1">
          <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground">Willkommen zurück, {user?.username}</p>
        </div>
      </FadeIn>

      <FadeIn delay={0.05}>
        <StaggeredList staggerDelay={0.08} className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          <CardHover>
            <Card className="cursor-pointer">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Ringer</CardTitle>
                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
                  <Users className="h-5 w-5 text-primary" />
                </motion.div>
              </CardHeader>
              <CardContent className="pb-4">
                <div className="text-3xl font-bold">{stats?.wrestlers.total || 0}</div>
                <p className="text-xs text-muted-foreground mt-1">
                  +{stats?.wrestlers.this_week || 0} diese Woche
                </p>
              </CardContent>
            </Card>
          </CardHover>

          <CardHover>
            <Card className="cursor-pointer">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Trainer</CardTitle>
                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
                  <UserCog className="h-5 w-5 text-secondary" />
                </motion.div>
              </CardHeader>
              <CardContent className="pb-4">
                <div className="text-3xl font-bold">{stats?.trainers.total || 0}</div>
                <p className="text-xs text-muted-foreground mt-1">
                  Aktiv: {stats?.trainers.active || 0}
                </p>
              </CardContent>
            </Card>
          </CardHover>

          <CardHover>
            <Card className="cursor-pointer">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Trainings</CardTitle>
                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
                  <CalendarDays className="h-5 w-5 text-accent" />
                </motion.div>
              </CardHeader>
              <CardContent className="pb-4">
                <div className="text-3xl font-bold">{stats?.trainings.total || 0}</div>
                <p className="text-xs text-muted-foreground mt-1">
                  +{stats?.trainings.this_week || 0} diese Woche
                </p>
              </CardContent>
            </Card>
          </CardHover>

          <CardHover>
            <Card className="cursor-pointer">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">Hausaufgaben</CardTitle>
                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
                  <BookOpen className="h-5 w-5 text-primary" />
                </motion.div>
              </CardHeader>
              <CardContent className="pb-4">
                <div className="text-3xl font-bold">{stats?.homework.open || 0}</div>
                <p className="text-xs text-muted-foreground mt-1">
                  offen
                </p>
              </CardContent>
            </Card>
          </CardHover>
        </StaggeredList>
      </FadeIn>

      <div className="grid gap-6 lg:grid-cols-2">
        <FadeIn delay={0.1}>
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center gap-2">
                <Users className="h-4 w-4 text-secondary" />
                Teilnahme diese Woche
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {groupOrder.filter(g => g !== "inactive").map((group) => {
                const data = stats?.attendance.this_week[group]
                const config = groupConfig[group]
                return (
                  <div key={group} className="space-y-2">
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2">
                        <div className={`w-2 h-2 rounded-full ${config.color}`} />
                        <span>{config.label}</span>
                      </div>
                      <span className="font-medium">
                        {data?.attended || 0}/{data?.total || 0}
                      </span>
                    </div>
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div
                        className={`h-full ${config.color} transition-all duration-500 rounded-full`}
                        style={{ width: `${data?.percent || 0}%` }}
                      />
                    </div>
                  </div>
                )
              })}
              <div className="pt-2 border-t">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Ø Teilnehmer</span>
                  <span className="font-medium">
                    {stats?.attendance.average || 0}/{stats?.attendance.expected || 0}
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>
        </FadeIn>

        <FadeIn delay={0.15}>
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center gap-2">
                <TrendingUp className="h-4 w-4 text-primary" />
                Training Aktivität
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-end gap-1 h-24">
                {stats?.activity.map((day, i) => (
                  <div key={i} className="flex-1 flex flex-col items-center gap-1">
                    <div
                      className="w-full bg-primary/20 hover:bg-primary/30 transition-colors rounded-t"
                      style={{ height: `${Math.max((day.count / maxActivity) * 100, 4)}%` }}
                    />
                  </div>
                ))}
              </div>
              <p className="text-xs text-muted-foreground mt-2 text-center">
                Letzte 14 Tage
              </p>
            </CardContent>
          </Card>
        </FadeIn>
      </div>

      <FadeIn delay={0.2}>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base flex items-center gap-2">
              <BookOpen className="h-4 w-4 text-green-500" />
              Hausaufgaben Erledigung
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center gap-4">
              <div className="flex-1">
                <div className="h-4 bg-muted rounded-full overflow-hidden flex">
                  <div
                    className="h-full bg-green-500 transition-all duration-500"
                    style={{
                      width: `${stats?.homework.completed ? 
                        (stats.homework.completed / (stats.homework.open + stats.homework.completed) * 100) : 0}%`
                    }}
                  />
                </div>
              </div>
              <span className="text-sm font-medium whitespace-nowrap">
                {stats?.homework.completed || 0} ({stats?.homework.completed ? 
                  Math.round(stats.homework.completed / (stats.homework.open + stats.homework.completed) * 100) : 0}%)
              </span>
            </div>
            <div className="flex items-center justify-between text-xs text-muted-foreground">
              <span>Offen: {stats?.homework.open || 0}</span>
              <span>Erledigt: {stats?.homework.completed || 0}</span>
            </div>
          </CardContent>
        </Card>
      </FadeIn>

      <div className="grid gap-6 lg:grid-cols-2">
        <FadeIn delay={0.25}>
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center gap-2">
                <Users className="h-4 w-4 text-accent" />
                Ringer nach Gruppe
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {groupOrder.map((group) => {
                const count = stats?.wrestlers_by_group[group] || 0
                const config = groupConfig[group]
                const total = stats?.wrestlers.total || 1
                return (
                  <div key={group} className="space-y-2">
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2">
                        <div className={`w-2 h-2 rounded-full ${config.color}`} />
                        <span>{config.label}</span>
                      </div>
                      <span className="font-medium">{count}</span>
                    </div>
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div
                        className={`h-full ${config.color} transition-all duration-500 rounded-full`}
                        style={{ width: `${(count / total) * 100}%` }}
                      />
                    </div>
                  </div>
                )
              })}
            </CardContent>
          </Card>
        </FadeIn>

        <FadeIn delay={0.3}>
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center gap-2">
                <Trophy className="h-4 w-4 text-yellow-500" />
                Top Trainer
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {stats?.top_trainers && stats.top_trainers.length > 0 ? (
                stats.top_trainers.map((trainer, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                      i === 0 ? "bg-yellow-100 text-yellow-700" :
                      i === 1 ? "bg-gray-100 text-gray-700" :
                      i === 2 ? "bg-orange-100 text-orange-700" :
                      "bg-muted text-muted-foreground"
                    }`}>
                      {i + 1}
                    </div>
                    <span className="flex-1 font-medium">{trainer.name}</span>
                    <Badge variant="secondary">{trainer.training_count} Training</Badge>
                  </div>
                ))
              ) : (
                <p className="text-sm text-muted-foreground">Keine Trainer vorhanden</p>
              )}
            </CardContent>
          </Card>
        </FadeIn>
      </div>
    </div>
  )
}