"use client";

import { useEffect } from "react";
import { useEvaluation } from "@/hooks/use-evaluation";
import { ProfileForm } from "@/components/profile-form";
import { SkillEvaluation } from "@/components/skill-evaluation";
import { useUser } from "@/hooks/use-user-context";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default function EvaluationPage() {
  const {
    userEvaluation,
    skillCategories,
    teams,
    loading,
    updateProfile,
    updateSkillLevel,
    updateSkillMentorStatus,
    updateSkillLearningStatus,
    addSkillToEvaluation,
    removeSkillFromEvaluation,
    initializeEmptyEvaluation,
  } = 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="container mx-auto py-8">
        <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-primary mx-auto mb-4"></div>
            <p>Chargement...</p>
          </div>
        </div>
      </div>
    );
  }

  // If no user evaluation exists, show profile form
  if (!userEvaluation) {
    const handleProfileSubmit = (profile: any) => {
      initializeEmptyEvaluation(profile);
    };

    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">
              Commencer l'évaluation
            </h1>
            <p className="text-lg text-slate-400 mb-8">
              Renseignez vos informations pour débuter votre auto-évaluation
            </p>
          </div>

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

  return (
    <div>
      {/* Skill Evaluation */}
      {skillCategories.length > 0 && userEvaluation.evaluations.length > 0 && (
        <SkillEvaluation
          categories={skillCategories}
          evaluations={userEvaluation.evaluations}
          onUpdateSkill={updateSkillLevel}
          onUpdateMentorStatus={updateSkillMentorStatus}
          onUpdateLearningStatus={updateSkillLearningStatus}
          onAddSkill={addSkillToEvaluation}
          onRemoveSkill={removeSkillFromEvaluation}
        />
      )}
    </div>
  );
}