"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";
import {
  Users,
  TrendingUp,
  BarChart3,
  Target,
  Building2,
  UserCheck,
  Filter,
} from "lucide-react";
import { loadTeams, loadSkillCategories } from "@/lib/data-loader";
import { Team, SkillCategory, UserEvaluation } from "@/lib/types";
import {
  TeamStatsCard,
  DirectionOverview,
  MultiSelectFilter,
} from "@/components/admin";
import { TeamDetailModal } from "@/components/admin/team-detail-modal";

interface TeamMember {
  id: string;
  firstName: string;
  lastName: string;
  skills: Array<{
    skillId: string;
    skillName: string;
    category: string;
    level: number;
    canMentor: boolean;
    wantsToLearn: boolean;
  }>;
  joinDate: string;
}

interface TeamStats {
  teamId: string;
  teamName: string;
  direction: string;
  totalMembers: number;
  averageSkillLevel: number;
  topSkills: Array<{ skillName: string; averageLevel: number }>;
  skillCoverage: number; // Percentage of skills evaluated
  members: TeamMember[];
}

interface DirectionStats {
  direction: string;
  teams: TeamStats[];
  totalMembers: number;
  averageSkillLevel: number;
  topCategories: Array<{ category: string; averageLevel: number }>;
}

// Helper function to generate realistic team members
function generateTeamMembers(
  teamName: string,
  memberCount: number,
  skillCategories: SkillCategory[]
) {
  const firstNames = [
    "Alice",
    "Bob",
    "Claire",
    "David",
    "Emma",
    "Frank",
    "Grace",
    "Hugo",
    "Iris",
    "Jack",
    "Kelly",
    "Liam",
    "Maya",
    "Noah",
    "Olivia",
    "Paul",
    "Quinn",
    "Rose",
    "Sam",
    "Tara",
  ];
  const lastNames = [
    "Martin",
    "Bernard",
    "Dubois",
    "Thomas",
    "Robert",
    "Richard",
    "Petit",
    "Durand",
    "Leroy",
    "Moreau",
    "Simon",
    "Laurent",
    "Michel",
    "Garcia",
    "David",
    "Bertrand",
    "Roux",
    "Vincent",
    "Fournier",
    "Morel",
  ];

  const allSkills: Array<{ skillName: string; category: string; id: string }> =
    [];
  skillCategories.forEach((category) => {
    category.skills.forEach((skill) => {
      allSkills.push({
        skillName: skill.name,
        category: category.category,
        id: skill.id,
      });
    });
  });

  return Array.from({ length: memberCount }, (_, index) => {
    const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
    const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];

    // Each member evaluates 8-15 random skills
    const skillCount = Math.floor(Math.random() * 8) + 8;
    const memberSkills = allSkills
      .sort(() => Math.random() - 0.5)
      .slice(0, skillCount)
      .map((skill) => ({
        skillId: skill.id,
        skillName: skill.skillName,
        category: skill.category,
        level: Math.floor(Math.random() * 4), // 0-3
        canMentor: Math.random() > 0.7, // 30% chance
        wantsToLearn: Math.random() > 0.6, // 40% chance
      }));

    return {
      id: `${teamName}-member-${index + 1}`,
      firstName,
      lastName,
      skills: memberSkills,
      joinDate: new Date(
        Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000 * 3
      )
        .toISOString()
        .split("T")[0], // Random date in last 3 years
    };
  });
}

// Helper function to get random skills from categories
function getRandomSkills(skillCategories: SkillCategory[], count: number = 3) {
  const allSkills: Array<{
    skillName: string;
    category: string;
    icon: string;
  }> = [];

  skillCategories.forEach((category) => {
    category.skills.forEach((skill) => {
      allSkills.push({
        skillName: skill.name,
        category: category.category,
        icon: skill.icon || "",
      });
    });
  });

  // Shuffle and pick random skills
  const shuffled = allSkills.sort(() => Math.random() - 0.5);
  const randomSkills = shuffled.slice(0, count).map((skill) => ({
    skillName: skill.skillName,
    averageLevel: Math.random() * 3,
    icon: skill.icon,
  }));

  // Sort by average level (descending - highest first)
  return randomSkills.sort((a, b) => b.averageLevel - a.averageLevel);
}

// Mock data generator - à remplacer par de vraies données
function generateMockTeamStats(
  teams: Team[],
  skillCategories: SkillCategory[]
): TeamStats[] {
  return teams.map((team) => {
    const memberCount = Math.floor(Math.random() * 10) + 3; // 3-12 members
    const members = generateTeamMembers(
      team.name,
      memberCount,
      skillCategories
    );

    return {
      teamId: team.id,
      teamName: team.name,
      direction: team.direction,
      totalMembers: memberCount,
      averageSkillLevel: Math.random() * 3, // 0-3
      topSkills: getRandomSkills(skillCategories, 3),
      skillCoverage: Math.random() * 100, // 0-100%
      members: members,
    };
  });
}

function generateDirectionStats(teamStats: TeamStats[]): DirectionStats[] {
  const directions = Array.from(new Set(teamStats.map((t) => t.direction)));

  return directions.map((direction) => {
    const directionTeams = teamStats.filter((t) => t.direction === direction);
    const totalMembers = directionTeams.reduce(
      (sum, t) => sum + t.totalMembers,
      0
    );
    const averageSkillLevel =
      directionTeams.reduce((sum, t) => sum + t.averageSkillLevel, 0) /
      directionTeams.length;

    return {
      direction,
      teams: directionTeams,
      totalMembers,
      averageSkillLevel,
      topCategories: [
        { category: "Frontend", averageLevel: Math.random() * 3 },
        { category: "Backend", averageLevel: Math.random() * 3 },
        { category: "DevOps", averageLevel: Math.random() * 3 },
      ],
    };
  });
}

export default function AdminPage() {
  const [teams, setTeams] = useState<Team[]>([]);
  const [skillCategories, setSkillCategories] = useState<SkillCategory[]>([]);
  const [teamStats, setTeamStats] = useState<TeamStats[]>([]);
  const [directionStats, setDirectionStats] = useState<DirectionStats[]>([]);
  const [loading, setLoading] = useState(true);

  // Filtres
  const [selectedDirections, setSelectedDirections] = useState<string[]>([]);
  const [selectedTeams, setSelectedTeams] = useState<string[]>([]);

  // Modale de détails
  const [selectedTeamForModal, setSelectedTeamForModal] =
    useState<TeamStats | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        const [teamsData, categoriesData] = await Promise.all([
          loadTeams(),
          loadSkillCategories(),
        ]);

        setTeams(teamsData);
        setSkillCategories(categoriesData);

        // Generate mock stats
        const mockTeamStats = generateMockTeamStats(teamsData, categoriesData);
        const mockDirectionStats = generateDirectionStats(mockTeamStats);

        setTeamStats(mockTeamStats);
        setDirectionStats(mockDirectionStats);
      } catch (error) {
        console.error("Failed to load admin data:", error);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, []);

  // Fonctions de filtrage
  const getFilteredTeamStats = () => {
    let filtered = teamStats;

    if (selectedDirections.length > 0) {
      filtered = filtered.filter((team) =>
        selectedDirections.includes(team.direction)
      );
    }

    if (selectedTeams.length > 0) {
      filtered = filtered.filter((team) => selectedTeams.includes(team.teamId));
    }

    return filtered;
  };

  const getFilteredDirectionStats = () => {
    let filtered = directionStats;

    if (selectedDirections.length > 0) {
      filtered = filtered.filter((direction) =>
        selectedDirections.includes(direction.direction)
      );
    }

    // Si des équipes spécifiques sont sélectionnées, filtrer aussi les équipes dans les directions
    if (selectedTeams.length > 0) {
      filtered = filtered
        .map((direction) => ({
          ...direction,
          teams: direction.teams.filter((team) =>
            selectedTeams.includes(team.teamId)
          ),
          totalMembers: direction.teams
            .filter((team) => selectedTeams.includes(team.teamId))
            .reduce((sum, team) => sum + team.totalMembers, 0),
          averageSkillLevel: direction.teams
            .filter((team) => selectedTeams.includes(team.teamId))
            .reduce(
              (sum, team, _, arr) => sum + team.averageSkillLevel / arr.length,
              0
            ),
        }))
        .filter((direction) => direction.teams.length > 0);
    }

    return filtered;
  };

  // Options pour les filtres
  const directionOptions = Array.from(
    new Set(teams.map((team) => team.direction))
  ).map((direction) => ({
    id: direction,
    label: direction,
    count: teams.filter((team) => team.direction === direction).length,
  }));

  const teamOptions = teams.map((team) => ({
    id: team.id,
    label: `${team.name} (${team.direction})`,
    count: teamStats.find((stat) => stat.teamId === team.id)?.totalMembers || 0,
  }));

  // Fonctions pour les actions des équipes
  const handleViewTeamDetails = (team: TeamStats) => {
    setSelectedTeamForModal(team);
    setIsModalOpen(true);
  };

  const handleExportTeamReport = (team: TeamStats) => {
    const reportData = {
      team: team.teamName,
      direction: team.direction,
      date: new Date().toLocaleDateString(),
      stats: {
        members: team.totalMembers,
        averageLevel: team.averageSkillLevel,
        coverage: team.skillCoverage,
      },
      topSkills: team.topSkills,
    };

    const dataStr = JSON.stringify(reportData, null, 2);
    const dataUri =
      "data:application/json;charset=utf-8," + encodeURIComponent(dataStr);

    const exportFileDefaultName = `rapport-${team.teamName.toLowerCase()}-${
      new Date().toISOString().split("T")[0]
    }.json`;

    const linkElement = document.createElement("a");
    linkElement.setAttribute("href", dataUri);
    linkElement.setAttribute("download", exportFileDefaultName);
    linkElement.click();
  };

  if (loading) {
    return (
      <div className="container mx-auto p-6">
        <div className="flex items-center justify-center h-64">
          <div className="text-lg">
            Chargement des données d'administration...
          </div>
        </div>
      </div>
    );
  }

  return (
    <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 space-y-8">
        {/* Header */}
        <div className="text-center space-y-4 mb-12">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
            <Building2 className="h-4 w-4 text-blue-400" />
            <span className="text-sm font-medium text-slate-200">
              Administration
            </span>
          </div>

          <h1 className="text-4xl font-bold text-white">
            Dashboard Managérial
          </h1>

          <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
            Vue d'ensemble des compétences par équipe et direction pour pilotage
            stratégique
          </p>
        </div>

        {/* Overview Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
            <div className="flex items-center justify-between mb-4">
              <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
                <Users className="h-5 w-5 text-blue-400" />
              </div>
              <div className="text-xs text-slate-400 font-medium">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? "FILTRÉES"
                  : "TOTAL"}
              </div>
            </div>
            <div className="space-y-1">
              <p className="text-2xl font-bold text-white">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? getFilteredTeamStats().length
                  : teams.length}
              </p>
              <p className="text-sm text-slate-400">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? "Équipes filtrées"
                  : "Équipes"}
              </p>
              {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
                <p className="text-xs text-slate-500">
                  sur {teams.length} au total
                </p>
              )}
            </div>
          </div>

          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
            <div className="flex items-center justify-between mb-4">
              <div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
                <UserCheck className="h-5 w-5 text-green-400" />
              </div>
              <div className="text-xs text-slate-400 font-medium">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? "FILTRÉS"
                  : "TOTAL"}
              </div>
            </div>
            <div className="space-y-1">
              <p className="text-2xl font-bold text-white">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? getFilteredTeamStats().reduce(
                      (sum, t) => sum + t.totalMembers,
                      0
                    )
                  : teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
              </p>
              <p className="text-sm text-slate-400">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? "Membres filtrés"
                  : "Membres"}
              </p>
              {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
                <p className="text-xs text-slate-500">
                  sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
                  total
                </p>
              )}
            </div>
          </div>

          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
            <div className="flex items-center justify-between mb-4">
              <div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
                <Building2 className="h-5 w-5 text-purple-400" />
              </div>
              <div className="text-xs text-slate-400 font-medium">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? "FILTRÉES"
                  : "TOTAL"}
              </div>
            </div>
            <div className="space-y-1">
              <p className="text-2xl font-bold text-white">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? getFilteredDirectionStats().length
                  : directionStats.length}
              </p>
              <p className="text-sm text-slate-400">
                {selectedDirections.length > 0 || selectedTeams.length > 0
                  ? "Directions filtrées"
                  : "Directions"}
              </p>
              {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
                <p className="text-xs text-slate-500">
                  sur {directionStats.length} au total
                </p>
              )}
            </div>
          </div>

          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
            <div className="flex items-center justify-between mb-4">
              <div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
                <Target className="h-5 w-5 text-orange-400" />
              </div>
              <div className="text-xs text-slate-400 font-medium">
                RÉFÉRENTIEL
              </div>
            </div>
            <div className="space-y-1">
              <p className="text-2xl font-bold text-white">
                {skillCategories.reduce(
                  (sum, cat) => sum + cat.skills.length,
                  0
                )}
              </p>
              <p className="text-sm text-slate-400">Compétences suivies</p>
              <p className="text-xs text-slate-500">
                {skillCategories.length} catégories
              </p>
            </div>
          </div>
        </div>

        {/* Filtres */}
        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
          <div className="flex items-center gap-2 mb-6">
            <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
              <Filter className="h-4 w-4 text-blue-400" />
            </div>
            <h3 className="text-lg font-semibold text-white">
              Filtres avancés
            </h3>
          </div>

          <div className="flex flex-col lg:flex-row gap-4">
            <div className="flex-1">
              <MultiSelectFilter
                title="Directions"
                options={directionOptions}
                selectedValues={selectedDirections}
                onChange={setSelectedDirections}
                placeholder="Toutes les directions"
                icon={<Building2 className="h-4 w-4" />}
              />
            </div>
            <div className="flex-1">
              <MultiSelectFilter
                title="Équipes"
                options={teamOptions}
                selectedValues={selectedTeams}
                onChange={setSelectedTeams}
                placeholder="Toutes les équipes"
                icon={<Users className="h-4 w-4" />}
              />
            </div>

            {/* Résumé des filtres actifs */}
            {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
              <div className="flex flex-col lg:flex-row items-center gap-3">
                <div className="bg-blue-500/20 border border-blue-500/30 rounded-xl px-3 py-2">
                  <div className="flex items-center gap-2">
                    <Target className="h-3 w-3 text-blue-400" />
                    <span className="text-sm text-blue-300 font-medium">
                      {getFilteredTeamStats().reduce(
                        (sum, t) => sum + t.totalMembers,
                        0
                      )}{" "}
                      membres
                    </span>
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    setSelectedDirections([]);
                    setSelectedTeams([]);
                  }}
                  className="text-xs text-slate-400 hover:text-white hover:bg-white/10"
                >
                  Réinitialiser
                </Button>
              </div>
            )}
          </div>
        </div>

        {/* Main Content Tabs */}
        <Tabs defaultValue="directions" className="w-full">
          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
            <TabsList className="grid w-full grid-cols-2 bg-transparent border-0">
              <TabsTrigger
                value="directions"
                className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
              >
                Vue par Direction
              </TabsTrigger>
              <TabsTrigger
                value="teams"
                className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
              >
                Vue par Équipe
              </TabsTrigger>
            </TabsList>
          </div>

          <TabsContent value="directions" className="space-y-6">
            <div className="grid gap-6">
              {getFilteredDirectionStats().length > 0 ? (
                getFilteredDirectionStats().map((direction) => (
                  <DirectionOverview
                    key={direction.direction}
                    direction={direction.direction}
                    teams={direction.teams}
                    totalMembers={direction.totalMembers}
                    averageSkillLevel={direction.averageSkillLevel}
                    topCategories={direction.topCategories}
                    onViewTeamDetails={handleViewTeamDetails}
                    onExportTeamReport={handleExportTeamReport}
                  />
                ))
              ) : (
                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
                  <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
                    <Building2 className="h-6 w-6 text-slate-400" />
                  </div>
                  <h3 className="text-lg font-medium text-white mb-2">
                    Aucune direction trouvée
                  </h3>
                  <p className="text-slate-400 text-sm">
                    Aucune direction ne correspond aux filtres sélectionnés.
                  </p>
                </div>
              )}
            </div>
          </TabsContent>

          <TabsContent value="teams" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {getFilteredTeamStats().length > 0 ? (
                getFilteredTeamStats().map((team) => (
                  <TeamStatsCard
                    key={team.teamId}
                    teamId={team.teamId}
                    teamName={team.teamName}
                    direction={team.direction}
                    totalMembers={team.totalMembers}
                    averageSkillLevel={team.averageSkillLevel}
                    topSkills={team.topSkills}
                    skillCoverage={team.skillCoverage}
                    onViewDetails={() => handleViewTeamDetails(team)}
                    onViewReport={() => handleExportTeamReport(team)}
                  />
                ))
              ) : (
                <div className="col-span-full">
                  <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
                    <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
                      <Users className="h-6 w-6 text-slate-400" />
                    </div>
                    <h3 className="text-lg font-medium text-white mb-2">
                      Aucune équipe trouvée
                    </h3>
                    <p className="text-slate-400 text-sm">
                      Aucune équipe ne correspond aux filtres sélectionnés.
                    </p>
                  </div>
                </div>
              )}
            </div>
          </TabsContent>
        </Tabs>

        {/* Modale de détails d'équipe */}
        <TeamDetailModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          team={selectedTeamForModal}
        />
      </div>
    </div>
  );
}