"use client";

import { useState, useEffect } from "react";
import {
  Plus,
  Edit,
  Trash2,
  Code2,
  Palette,
  Database,
  Cloud,
  Shield,
  Smartphone,
  Layers,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
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 {
  TreeCategoryHeader,
  TreeItemRow,
} from "@/components/admin";
import { TreeViewPage } from "../tree-view-page";
import { useTreeView } from "@/hooks/use-tree-view";
import { useFormDialog } from "@/hooks/use-form-dialog";

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 [editingSkill, setEditingSkill] = useState<any>(null);
  const [skillFormData, setSkillFormData] = useState<SkillFormData>({
    name: "",
    categoryId: "",
    description: "",
    icon: "",
  });
  const { toast } = useToast();
  const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();

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

  // Utilisation du hook factorisé
  const {
    filteredDataByCategory: filteredSkillsByCategory,
    expandedCategories,
    toggleCategory,
    expandAll,
    collapseAll,
  } = useTreeView({
    data: skills,
    searchFields: ['name', 'description'],
    groupBy: (skill) => skill.category,
    searchTerm,
    onSearchChange: setSearchTerm,
  });

  // 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();
  }, []);

  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: "" });
      closeCreateDialog();

      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,
    });
    openEditDialog();
  };

  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);
      closeEditDialog();
      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
  };

  const headerActions = (
          <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
      <DialogTrigger asChild>
        <Button onClick={() => { resetForm(); openCreateDialog(); }}>
          <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={closeCreateDialog}
            >
              Annuler
            </Button>
            <Button onClick={handleCreateSkill}>Créer</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );

  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}
      >
        {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>
          )
        )}
      </TreeViewPage>

      {/* Dialog d'édition */}
      <Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
        <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={closeEditDialog}
              >
                Annuler
              </Button>
              <Button onClick={handleUpdateSkill}>Mettre à jour</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}