"use client";

import { useState, useEffect, useMemo } from "react";
import {
  Plus,
  Edit,
  Trash2,
  Code2,
  Search,
  Folder,
  FolderOpen,
  ChevronRight,
  ChevronDown,
  Palette,
  Database,
  Cloud,
  Shield,
  Smartphone,
  Layers,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/hooks/use-toast";
import { SkillCategory, Team } from "@/lib/types";
import {
  AdminManagementService,
  Skill,
} from "@/services/admin-management-service";
import { TechIcon } from "@/components/icons/tech-icon";
import {
  TreeViewContainer,
  TreeCategoryHeader,
  TreeItemRow,
  TreeSearchControls,
} from "@/components/admin";

interface SkillsManagementProps {
  skillCategories: SkillCategory[];
  teams: Team[];
}

interface SkillFormData {
  name: string;
  categoryId: string;
  description: string;
  icon: string;
}

export function SkillsManagement({
  skillCategories,
  teams,
}: SkillsManagementProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [editingSkill, setEditingSkill] = useState<any>(null);
  const [skillFormData, setSkillFormData] = useState<SkillFormData>({
    name: "",
    categoryId: "",
    description: "",
    icon: "",
  });
  const { toast } = useToast();

  // État des skills
  const [skills, setSkills] = useState<Skill[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  // État pour les catégories ouvertes/fermées
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
    new Set()
  );

  // Grouper les skills par catégorie et filtrer en fonction de la recherche
  const filteredSkillsByCategory = useMemo(() => {
    // Grouper les skills par catégorie
    const skillsByCategory = skills.reduce((acc, skill) => {
      if (!acc[skill.category]) {
        acc[skill.category] = [];
      }
      acc[skill.category].push(skill);
      return acc;
    }, {} as Record<string, Skill[]>);

    // Filtrer les skills en fonction de la recherche
    return Object.entries(skillsByCategory).reduce(
      (acc, [category, categorySkills]) => {
        const filteredSkills = categorySkills.filter((skill) => {
          const matchesSearch =
            skill.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            (skill.description &&
              skill.description
                .toLowerCase()
                .includes(searchTerm.toLowerCase()));
          return matchesSearch;
        });

        if (filteredSkills.length > 0) {
          acc[category] = filteredSkills;
        }
        return acc;
      },
      {} as Record<string, Skill[]>
    );
  }, [skills, searchTerm]);

  // Fonctions pour gérer l'expansion des catégories
  const toggleCategory = useMemo(
    () => (category: string) => {
      setExpandedCategories((prev) => {
        const newExpanded = new Set(prev);
        if (newExpanded.has(category)) {
          newExpanded.delete(category);
        } else {
          newExpanded.add(category);
        }
        return newExpanded;
      });
    },
    []
  );

  const expandAll = useMemo(
    () => () => {
      setExpandedCategories(new Set(Object.keys(filteredSkillsByCategory)));
    },
    [filteredSkillsByCategory]
  );

  const collapseAll = useMemo(
    () => () => {
      setExpandedCategories(new Set());
    },
    []
  );

  // Charger les skills depuis l'API
  const fetchSkills = async () => {
    try {
      setIsLoading(true);
      const skillsData = await AdminManagementService.getSkills();
      setSkills(skillsData);
    } catch (error) {
      console.error("Error fetching skills:", error);
      toast({
        title: "Erreur",
        description: "Impossible de charger les skills",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  // Charger les skills au montage du composant
  useEffect(() => {
    fetchSkills();
  }, []);

  // Ouvrir automatiquement les catégories qui contiennent des résultats lors de la recherche
  useEffect(() => {
    if (searchTerm.trim()) {
      const categoriesWithResults = Object.keys(filteredSkillsByCategory);
      setExpandedCategories(new Set(categoriesWithResults));
    } else {
      // Si pas de recherche, fermer toutes les catégories
      setExpandedCategories(new Set());
    }
  }, [searchTerm, filteredSkillsByCategory]);

  const handleCreateSkill = async () => {
    if (!skillFormData.name || !skillFormData.categoryId) {
      toast({
        title: "Erreur",
        description: "Veuillez remplir tous les champs obligatoires",
        variant: "destructive",
      });
      return;
    }

    try {
      const categoryIndex = parseInt(skillFormData.categoryId);
      const category = skillCategories[categoryIndex];

      const skillData = {
        ...skillFormData,
        category: category.category,
      };

      const newSkill = await AdminManagementService.createSkill(skillData);
      setSkills([...skills, newSkill]);
      setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
      setIsCreateDialogOpen(false);

      toast({
        title: "Succès",
        description: "Skill créée avec succès",
      });
    } catch (error: any) {
      toast({
        title: "Erreur",
        description: error.message || "Erreur lors de la création de la skill",
        variant: "destructive",
      });
    }
  };

  const handleEditSkill = (skill: any) => {
    setEditingSkill(skill);
    const categoryIndex = skillCategories.findIndex(
      (cat) => cat.category === skill.category
    );
    setSkillFormData({
      name: skill.name,
      categoryId: categoryIndex !== -1 ? categoryIndex.toString() : "",
      description: skill.description,
      icon: skill.icon,
    });
    setIsEditDialogOpen(true);
  };

  const handleUpdateSkill = async () => {
    if (!editingSkill || !skillFormData.name || !skillFormData.categoryId) {
      toast({
        title: "Erreur",
        description: "Veuillez remplir tous les champs obligatoires",
        variant: "destructive",
      });
      return;
    }

    try {
      const categoryIndex = parseInt(skillFormData.categoryId);
      const category = skillCategories[categoryIndex];

      const skillData = {
        id: editingSkill.id,
        ...skillFormData,
        category: category.category,
        usageCount: editingSkill.usageCount,
      };

      const updatedSkill = await AdminManagementService.updateSkill(skillData);

      const updatedSkills = skills.map((skill) =>
        skill.id === editingSkill.id ? updatedSkill : skill
      );

      setSkills(updatedSkills);
      setIsEditDialogOpen(false);
      setEditingSkill(null);
      setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });

      toast({
        title: "Succès",
        description: "Skill mise à jour avec succès",
      });
    } catch (error: any) {
      toast({
        title: "Erreur",
        description:
          error.message || "Erreur lors de la mise à jour de la skill",
        variant: "destructive",
      });
    }
  };

  const handleDeleteSkill = async (skillId: string) => {
    if (
      confirm(
        "Êtes-vous sûr de vouloir supprimer cette skill ? Cette action est irréversible."
      )
    ) {
      try {
        await AdminManagementService.deleteSkill(skillId);
        setSkills(skills.filter((s) => s.id !== skillId));
        toast({
          title: "Succès",
          description: "Skill supprimée avec succès",
        });
      } catch (error: any) {
        toast({
          title: "Erreur",
          description:
            error.message || "Erreur lors de la suppression de la skill",
          variant: "destructive",
        });
      }
    }
  };

  const resetForm = () => {
    setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
  };

  // Fonction pour obtenir l'icône de la catégorie
  const getCategoryIcon = (category: string) => {
    const categoryName = category.toLowerCase();
    if (categoryName.includes("frontend") || categoryName.includes("front"))
      return Code2;
    if (categoryName.includes("backend") || categoryName.includes("back"))
      return Layers;
    if (
      categoryName.includes("design") ||
      categoryName.includes("ui") ||
      categoryName.includes("ux")
    )
      return Palette;
    if (categoryName.includes("data") || categoryName.includes("database"))
      return Database;
    if (categoryName.includes("cloud") || categoryName.includes("devops"))
      return Cloud;
    if (categoryName.includes("security") || categoryName.includes("securité"))
      return Shield;
    if (
      categoryName.includes("mobile") ||
      categoryName.includes("android") ||
      categoryName.includes("ios")
    )
      return Smartphone;
    return Code2; // Par défaut
  };

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div>
          <h2 className="text-2xl font-bold text-white">Gestion des Skills</h2>
          <p className="text-slate-400">
            Créez, modifiez et supprimez les skills de votre organisation
          </p>
        </div>
        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
          <DialogTrigger asChild>
            <Button onClick={resetForm}>
              <Plus className="w-4 h-4 mr-2" />
              Nouvelle Skill
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>Créer une nouvelle skill</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="skill-name">Nom de la skill *</Label>
                <Input
                  id="skill-name"
                  value={skillFormData.name}
                  onChange={(e) =>
                    setSkillFormData({ ...skillFormData, name: e.target.value })
                  }
                  placeholder="Ex: React, Node.js, PostgreSQL"
                />
              </div>
              <div>
                <Label htmlFor="skill-category">Catégorie *</Label>
                <Select
                  value={skillFormData.categoryId}
                  onValueChange={(value) =>
                    setSkillFormData({ ...skillFormData, categoryId: value })
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Sélectionner une catégorie" />
                  </SelectTrigger>
                  <SelectContent>
                    {skillCategories.map((category, index) => (
                      <SelectItem key={index} value={index.toString()}>
                        {category.category}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="skill-description">Description</Label>
                <Textarea
                  id="skill-description"
                  value={skillFormData.description}
                  onChange={(e) =>
                    setSkillFormData({
                      ...skillFormData,
                      description: e.target.value,
                    })
                  }
                  placeholder="Description de la skill..."
                  rows={3}
                />
              </div>
              <div>
                <Label htmlFor="skill-icon">Icône</Label>
                <Input
                  id="skill-icon"
                  value={skillFormData.icon}
                  onChange={(e) =>
                    setSkillFormData({ ...skillFormData, icon: e.target.value })
                  }
                  placeholder="Ex: react, nodejs, postgresql"
                />
              </div>
              <div className="flex justify-end gap-2 pt-4">
                <Button
                  variant="outline"
                  onClick={() => setIsCreateDialogOpen(false)}
                >
                  Annuler
                </Button>
                <Button onClick={handleCreateSkill}>Créer</Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {/* Filtres et contrôles */}
      <TreeSearchControls
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
        onExpandAll={expandAll}
        onCollapseAll={collapseAll}
        placeholder="Rechercher une skill..."
      />

      {/* Vue arborescente des Skills */}
      <TreeViewContainer
        isLoading={isLoading}
        loadingMessage="Chargement des skills..."
        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
        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>
        }
      >
        {Object.entries(filteredSkillsByCategory).map(
          ([category, categorySkills], index) => (
            <div key={category}>
              <TreeCategoryHeader
                category={category}
                isExpanded={expandedCategories.has(category)}
                onToggle={() => toggleCategory(category)}
                icon={(() => {
                  const IconComponent = getCategoryIcon(category);
                  return <IconComponent className="w-5 h-5 text-blue-400" />;
                })()}
                itemCount={categorySkills.length}
                itemLabel="skill"
                showSeparator={index > 0}
              />

              {/* Liste des skills de la catégorie */}
              {expandedCategories.has(category) && (
                <div className="bg-slate-950/30">
                  {categorySkills.map((skill, skillIndex) => (
                    <TreeItemRow
                      key={skill.id}
                      icon={
                        <div className="flex items-center gap-3">
                          <TechIcon
                            iconName={skill.icon}
                            className="w-5 h-5 text-green-400"
                            fallbackText={skill.name}
                          />
                          <div className="p-1 bg-green-500/20 border border-green-500/30 rounded text-xs font-mono text-green-400 min-w-[3rem] text-center shrink-0">
                            {skill.icon || "?"}
                          </div>
                        </div>
                      }
                      title={skill.name}
                      subtitle={skill.description}
                      badges={[
                        {
                          text: `${skill.usageCount} util.`,
                          variant: "outline",
                        },
                      ]}
                      onEdit={() => handleEditSkill(skill)}
                      onDelete={() => handleDeleteSkill(skill.id)}
                      canDelete={skill.usageCount === 0}
                      showSeparator={skillIndex > 0}
                    />
                  ))}
                </div>
              )}
            </div>
          )
        )}
      </TreeViewContainer>

      {/* Dialog d'édition */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Modifier la skill</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="edit-skill-name">Nom de la skill *</Label>
              <Input
                id="edit-skill-name"
                value={skillFormData.name}
                onChange={(e) =>
                  setSkillFormData({ ...skillFormData, name: e.target.value })
                }
                placeholder="Ex: React, Node.js, PostgreSQL"
              />
            </div>
            <div>
              <Label htmlFor="edit-skill-category">Catégorie *</Label>
              <Select
                value={skillFormData.categoryId}
                onValueChange={(value) =>
                  setSkillFormData({ ...skillFormData, categoryId: value })
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Sélectionner une catégorie" />
                </SelectTrigger>
                <SelectContent>
                  {skillCategories.map((category, index) => (
                    <SelectItem key={index} value={index.toString()}>
                      {category.category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="edit-skill-description">Description</Label>
              <Textarea
                id="edit-skill-description"
                value={skillFormData.description}
                onChange={(e) =>
                  setSkillFormData({
                    ...skillFormData,
                    description: e.target.value,
                  })
                }
                placeholder="Description de la skill..."
                rows={3}
              />
            </div>
            <div>
              <Label htmlFor="edit-skill-icon">Icône</Label>
              <Input
                id="edit-skill-icon"
                value={skillFormData.icon}
                onChange={(e) =>
                  setSkillFormData({ ...skillFormData, icon: e.target.value })
                }
                placeholder="Ex: react, nodejs, postgresql"
              />
            </div>
            <div className="flex justify-end gap-2 pt-4">
              <Button
                variant="outline"
                onClick={() => setIsEditDialogOpen(false)}
              >
                Annuler
              </Button>
              <Button onClick={handleUpdateSkill}>Mettre à jour</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}