peakskills/components/skill-evaluation.tsx

"use client";

import { useState, useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
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;
  onUpdateMentorStatus: (
    category: string,
    skillId: string,
    canMentor: boolean
  ) => void;
  onUpdateLearningStatus: (
    category: string,
    skillId: string,
    wantsToLearn: boolean
  ) => void;
  onAddSkill: (category: string, skillId: string) => void;
  onRemoveSkill: (category: string, skillId: string) => void;
}

export function SkillEvaluation({
  categories,
  evaluations,
  onUpdateSkill,
  onUpdateMentorStatus,
  onUpdateLearningStatus,
  onAddSkill,
  onRemoveSkill,
}: SkillEvaluationProps) {
  const searchParams = useSearchParams();
  const router = useRouter();
  const categoryParam = searchParams.get("category");

  const [selectedCategory, setSelectedCategory] = useState(
    categories[0]?.category || ""
  );

  const handleCategoryChange = (category: string) => {
    setSelectedCategory(category);
    // Update URL without page reload
    const newUrl = new URL(window.location.href);
    newUrl.searchParams.set("category", category);
    router.replace(newUrl.pathname + newUrl.search);
  };

  // Update selected category when URL param changes or categories load
  useEffect(() => {
    if (categoryParam && categories.some((c) => c.category === categoryParam)) {
      setSelectedCategory(categoryParam);
    } else if (categories.length > 0 && !selectedCategory) {
      setSelectedCategory(categories[0].category);
    }
  }, [categoryParam, categories]); // Remove selectedCategory from deps to avoid loop

  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={handleCategoryChange}
          />

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

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

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