"use client";

import { useState } from "react";
import { Plus, Code2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DialogTrigger } from "@/components/ui/dialog";
import { SkillCategory, Team } from "@/lib/types";
import { TreeViewPage } from "../management/tree-view-page";
import { useTreeView } from "@/hooks/use-tree-view";
import { useFormDialog } from "@/hooks/use-form-dialog";
import {
  useSkillsManagement,
  useSkillCategoriesManagement,
} from "@/hooks/use-skills-management";
import { SkillFormDialog } from "./skill-form-dialog";
import { SkillsList } from "./skills-list";

interface SkillsManagementPageProps {
  skillCategories: SkillCategory[];
  initialSkills: any[];
}

export function SkillsManagementPage({
  skillCategories: initialSkillCategories,
  initialSkills,
}: SkillsManagementPageProps) {
  const [searchTerm, setSearchTerm] = useState("");

  // Utiliser le hook dédié pour la gestion des catégories
  const { skillCategories, handleDeleteCategory } =
    useSkillCategoriesManagement(initialSkillCategories);

  const {
    isCreateDialogOpen,
    isEditDialogOpen,
    openCreateDialog,
    closeCreateDialog,
    openEditDialog,
    closeEditDialog,
  } = useFormDialog();

  const {
    skills,
    isLoading,
    editingSkill,
    skillFormData,
    isSubmitting,
    setSkillFormData,
    resetForm,
    handleCreateSkill,
    handleEditSkill,
    handleUpdateSkill,
    handleDeleteSkill,
    handleImportanceChange,
  } = useSkillsManagement(skillCategories, initialSkills);

  // Utilisation du hook factorisé pour la vue arborescente
  const {
    filteredDataByCategory: filteredSkillsByCategory,
    expandedCategories,
    toggleCategory,
    expandAll,
    collapseAll,
  } = useTreeView({
    data: skills,
    searchFields: ["name", "description"],
    groupBy: (skill) => skill.category,
    searchTerm,
    onSearchChange: setSearchTerm,
    availableCategories: skillCategories.map((cat) => cat.name), // Ajouter les catégories disponibles
  });

  const handleCreateSubmit = async () => {
    const success = await handleCreateSkill();
    if (success) {
      closeCreateDialog();
    }
  };

  const handleEditSubmit = async () => {
    const success = await handleUpdateSkill();
    if (success) {
      closeEditDialog();
    }
  };

  const handleOpenCreateDialog = () => {
    resetForm();
    openCreateDialog();
  };

  const handleOpenEditDialog = (skill: any) => {
    handleEditSkill(skill);
    openEditDialog();
  };

  const handleImportanceChangeWrapper = async (
    skillId: string,
    newImportance: string
  ) => {
    await handleImportanceChange(skillId, newImportance);
  };

  const headerActions = (
    <Button onClick={handleOpenCreateDialog}>
      <Plus className="w-4 h-4 mr-2" />
      Nouvelle Skill
    </Button>
  );

  const emptyState = (
    <div className="text-center py-8">
      <Code2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
      <h3 className="text-base font-medium text-slate-400 mb-1">
        {searchTerm ? "Aucune skill trouvée" : "Aucune skill"}
      </h3>
      <p className="text-slate-500 text-sm">
        {searchTerm
          ? "Essayez de modifier vos critères de recherche"
          : "Commencez par créer votre première skill"}
      </p>
    </div>
  );

  return (
    <>
      <TreeViewPage
        title="Gestion des Skills"
        description="Créez, modifiez et supprimez les skills de votre organisation"
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
        onExpandAll={expandAll}
        onCollapseAll={collapseAll}
        searchPlaceholder="Rechercher une skill..."
        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
        isLoading={isLoading}
        loadingMessage="Chargement des skills..."
        emptyState={emptyState}
        headerActions={headerActions}
      >
        <SkillsList
          filteredSkillsByCategory={filteredSkillsByCategory}
          expandedCategories={expandedCategories}
          onToggleCategory={toggleCategory}
          onEditSkill={handleOpenEditDialog}
          onDeleteSkill={handleDeleteSkill}
          onDeleteCategory={handleDeleteCategory}
          onImportanceChange={handleImportanceChangeWrapper}
        />
      </TreeViewPage>

      {/* Dialog de création */}
      <SkillFormDialog
        isOpen={isCreateDialogOpen}
        onClose={closeCreateDialog}
        onSubmit={handleCreateSubmit}
        title="Créer une nouvelle skill"
        formData={skillFormData}
        onFormDataChange={setSkillFormData}
        skillCategories={skillCategories}
        isSubmitting={isSubmitting}
      />

      {/* Dialog d'édition */}
      <SkillFormDialog
        isOpen={isEditDialogOpen}
        onClose={closeEditDialog}
        onSubmit={handleEditSubmit}
        title="Modifier la skill"
        formData={skillFormData}
        onFormDataChange={setSkillFormData}
        skillCategories={skillCategories}
        isSubmitting={isSubmitting}
      />
    </>
  );
}
