"use client";

import { useEffect } from "react";
import { useEvaluation } from "@/hooks/use-evaluation";
import { ProfileForm } from "@/components/profile-form";
import { SkillsRadarChart } from "@/components/radar-chart";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { generateRadarData } from "@/lib/evaluation-utils";
import { useUser } from "@/hooks/use-user-context";
import Link from "next/link";
import { Code2 } from "lucide-react";

export default function HomePage() {
  const { userEvaluation, skillCategories, teams, loading, updateProfile } =
    useEvaluation();

  const { setUserInfo } = useUser();

  // Update user info in navigation when user evaluation is loaded
  useEffect(() => {
    if (userEvaluation) {
      const teamName =
        teams.find((t) => t.id === userEvaluation.profile.teamId)?.name || "";
      setUserInfo({
        firstName: userEvaluation.profile.firstName,
        lastName: userEvaluation.profile.lastName,
        teamName,
      });
    } else {
      setUserInfo(null);
    }
  }, [userEvaluation, teams, setUserInfo]);

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
        <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />

        <div className="relative z-10 container mx-auto py-16 px-6">
          <div className="flex items-center justify-center min-h-[400px]">
            <div className="text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
              <p className="text-white">Chargement...</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (!userEvaluation) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
        <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />

        <div className="relative z-10 container mx-auto py-16 px-6">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4 text-white">
              Bienvenue sur PeakSkills
            </h1>
            <p className="text-lg text-slate-400 mb-8">
              Évaluez vos compétences techniques et suivez votre progression
            </p>
          </div>

          <div className="max-w-2xl mx-auto">
            <ProfileForm teams={teams} onSubmit={updateProfile} />
          </div>
        </div>
      </div>
    );
  }

  const radarData = generateRadarData(
    userEvaluation.evaluations,
    skillCategories
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
      {/* Background Effects */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
      <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
      <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />

      <div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
        {/* Header */}
        <div className="text-center space-y-4 mb-12">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
            <Code2 className="h-4 w-4 text-blue-400" />
            <span className="text-sm font-medium text-slate-200">
              Tableau de bord
            </span>
          </div>

          <h1 className="text-4xl font-bold text-white">
            Bonjour {userEvaluation.profile.firstName} !
          </h1>

          <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
            Voici un aperçu de vos compétences techniques
          </p>
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Radar Chart */}
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
            <div className="mb-6">
              <h3 className="text-xl font-bold text-white mb-2">
                Vue d'ensemble de vos compétences
              </h3>
              <p className="text-slate-400 text-sm">
                Graphique radar représentant votre niveau moyen par catégorie
              </p>
            </div>
            <div className="h-80">
              <SkillsRadarChart data={radarData} />
            </div>
          </div>

          {/* Category Breakdown */}
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
            <div className="mb-6">
              <h3 className="text-xl font-bold text-white mb-2">
                Détail par catégorie
              </h3>
              <p className="text-slate-400 text-sm">
                Vue détaillée de votre progression dans chaque domaine
              </p>
            </div>
            <div className="space-y-3">
              {radarData.map((category) => {
                const categoryEval = userEvaluation.evaluations.find(
                  (e) => e.category === category.category
                );
                const skillsCount = categoryEval?.selectedSkillIds?.length || 0;
                const evaluatedCount =
                  categoryEval?.skills.filter((s) => s.level !== null).length ||
                  0;

                return (
                  <div
                    key={category.category}
                    className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
                  >
                    <div className="flex justify-between items-center mb-2">
                      <h4 className="font-medium text-white text-sm">
                        {category.category}
                      </h4>
                      <div className="px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30">
                        <span className="text-xs font-medium text-blue-400">
                          {category.score.toFixed(1)}/3
                        </span>
                      </div>
                    </div>
                    <div className="text-xs text-slate-400 mb-2">
                      {evaluatedCount}/{skillsCount} compétences sélectionnées
                      évaluées
                    </div>
                    <div className="w-full bg-white/10 rounded-full h-1.5">
                      <div
                        className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all"
                        style={{
                          width: `${
                            (category.score / category.maxScore) * 100
                          }%`,
                        }}
                      ></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Action Button */}
        <div className="flex justify-center mt-12">
          <Button
            asChild
            size="lg"
            className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl"
          >
            <Link href="/evaluation">Continuer l'évaluation</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}