"use client";

import { useState } from "react";
import { TooltipProvider } from "@/components/ui/tooltip";
import { SkillCategory, SkillLevel, CategoryEvaluation } from "@/lib/types";
import { SkillSelector } from "./skill-selector";
import {
  EvaluationHeader,
  SkillLevelLegend,
  CategoryTabs,
  SkillEvaluationGrid,
} from "./evaluation";

interface SkillEvaluationProps {
  categories: SkillCategory[];
  evaluations: CategoryEvaluation[];
  onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
  onAddSkill: (category: string, skillId: string) => void;
  onRemoveSkill: (category: string, skillId: string) => void;
}

export function SkillEvaluation({
  categories,
  evaluations,
  onUpdateSkill,
  onAddSkill,
  onRemoveSkill,
}: SkillEvaluationProps) {
  const [selectedCategory, setSelectedCategory] = useState(
    categories[0]?.category || ""
  );

  const currentCategory = categories.find(
    (cat) => cat.category === selectedCategory
  );
  const currentEvaluation = evaluations.find(
    (evaluation) => evaluation.category === selectedCategory
  );

  if (!currentCategory) {
    return <div>Aucune catégorie disponible</div>;
  }

  return (
    <TooltipProvider>
      <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">
          <EvaluationHeader />

          <CategoryTabs
            categories={categories}
            selectedCategory={selectedCategory}
            onCategoryChange={setSelectedCategory}
          />

          <div className="space-y-8">
            <SkillSelector
              categories={categories}
              evaluations={evaluations}
              selectedCategory={selectedCategory}
              onAddSkill={onAddSkill}
              onRemoveSkill={onRemoveSkill}
            />

            {currentEvaluation && (
              <SkillEvaluationGrid
                currentCategory={currentCategory}
                currentEvaluation={currentEvaluation}
                onUpdateSkill={onUpdateSkill}
              />
            )}
          </div>

          <SkillLevelLegend />
        </div>
      </div>
    </TooltipProvider>
  );
}