"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Code2, Users, User } from "lucide-react";
import { Team, SkillCategory } from "@/lib/types";
import { TeamStats, DirectionStats } from "@/services/admin-service";
import { SkillsManagement } from "../management/pages/skills-management";
import { TeamsManagement } from "../management/pages/teams-management";
import { UsersManagement } from "../management/pages/users-management";

interface ManageContentTabsProps {
  teams: Team[];
  skillCategories: SkillCategory[];
  teamStats: TeamStats[];
  directionStats: DirectionStats[];
}

export function ManageContentTabs({
  teams,
  skillCategories,
  teamStats,
  directionStats,
}: ManageContentTabsProps) {
  return (
    <Tabs defaultValue="skills" 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-3 bg-transparent border-0">
          <TabsTrigger
            value="skills"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            <Code2 className="w-4 h-4 mr-2" />
            Gestion des Skills
          </TabsTrigger>
          <TabsTrigger
            value="teams"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            <Users className="w-4 h-4 mr-2" />
            Gestion des Teams
          </TabsTrigger>
          <TabsTrigger
            value="users"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            <User className="w-4 h-4 mr-2" />
            Gestion des Utilisateurs
          </TabsTrigger>
        </TabsList>
      </div>

      <TabsContent value="skills" className="space-y-4">
        <SkillsManagement skillCategories={skillCategories} teams={teams} />
      </TabsContent>

      <TabsContent value="teams" className="space-y-4">
        <TeamsManagement
          teams={teams}
          teamStats={teamStats}
          skillCategories={skillCategories}
        />
      </TabsContent>

      <TabsContent value="users" className="space-y-4">
        <UsersManagement />
      </TabsContent>
    </Tabs>
  );
}