"use client";

import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  BarChart, 
  Bar, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  Legend, 
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line
} from "recharts";
import { 
  BarChart4, 
  Users, 
  FolderKanban, 
  Tags, 
  Calendar, 
  Download 
} from "lucide-react";
import { Button } from "@/components/ui/button";

// Mock data for charts
const userRegistrationData = [
  { name: "Jan", count: 4 },
  { name: "Fév", count: 3 },
  { name: "Mar", count: 5 },
  { name: "Avr", count: 7 },
  { name: "Mai", count: 2 },
  { name: "Juin", count: 6 },
  { name: "Juil", count: 8 },
  { name: "Août", count: 9 },
  { name: "Sep", count: 11 },
  { name: "Oct", count: 13 },
  { name: "Nov", count: 7 },
  { name: "Déc", count: 5 },
];

const projectCreationData = [
  { name: "Jan", count: 2 },
  { name: "Fév", count: 4 },
  { name: "Mar", count: 3 },
  { name: "Avr", count: 5 },
  { name: "Mai", count: 1 },
  { name: "Juin", count: 3 },
  { name: "Juil", count: 6 },
  { name: "Août", count: 4 },
  { name: "Sep", count: 7 },
  { name: "Oct", count: 8 },
  { name: "Nov", count: 5 },
  { name: "Déc", count: 3 },
];

const userRoleData = [
  { name: "Administrateurs", value: 3 },
  { name: "Utilisateurs standard", value: 21 },
];

const tagUsageData = [
  { name: "Frontend", value: 12 },
  { name: "Backend", value: 8 },
  { name: "Fullstack", value: 5 },
  { name: "UX/UI", value: 3 },
  { name: "DevOps", value: 2 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

const dailyActiveUsersData = [
  { name: "Lun", users: 15 },
  { name: "Mar", users: 18 },
  { name: "Mer", users: 22 },
  { name: "Jeu", users: 19 },
  { name: "Ven", users: 23 },
  { name: "Sam", users: 12 },
  { name: "Dim", users: 10 },
];

export default function AdminStatsPage() {
  const [activeTab, setActiveTab] = useState("overview");

  // Mock statistics
  const stats = [
    {
      title: "Utilisateurs",
      value: "24",
      change: "+12%",
      trend: "up",
      icon: Users,
    },
    {
      title: "Projets",
      value: "32",
      change: "+8%",
      trend: "up",
      icon: FolderKanban,
    },
    {
      title: "Groupes créés",
      value: "128",
      change: "+15%",
      trend: "up",
      icon: Users,
    },
    {
      title: "Tags utilisés",
      value: "18",
      change: "+5%",
      trend: "up",
      icon: Tags,
    },
  ];

  const handleExportStats = () => {
    alert("Statistiques exportées en CSV");
  };

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h1 className="text-2xl sm:text-3xl font-bold">Statistiques</h1>
        <Button onClick={handleExportStats} className="w-full sm:w-auto">
          <Download className="mr-2 h-4 w-4" />
          Exporter en CSV
        </Button>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <Card key={index}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <p className={`text-xs ${stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}`}>
                {stat.change} depuis le mois dernier
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Tabs defaultValue="users" className="space-y-4" onValueChange={setActiveTab}>
        <TabsList className="w-full flex justify-start overflow-auto">
          <TabsTrigger value="users" className="flex-1 sm:flex-none">Utilisateurs</TabsTrigger>
          <TabsTrigger value="projects" className="flex-1 sm:flex-none">Projets</TabsTrigger>
          <TabsTrigger value="tags" className="flex-1 sm:flex-none">Tags</TabsTrigger>
          <TabsTrigger value="activity" className="flex-1 sm:flex-none">Activité</TabsTrigger>
        </TabsList>
        
        <TabsContent value="users" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Inscriptions d'utilisateurs par mois</CardTitle>
              <CardDescription>
                Nombre de nouveaux utilisateurs inscrits par mois
              </CardDescription>
            </CardHeader>
            <CardContent className="h-[300px] sm:h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={userRegistrationData}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="count" fill="#8884d8" name="Utilisateurs" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <CardTitle>Répartition des rôles utilisateurs</CardTitle>
              <CardDescription>
                Proportion d'administrateurs et d'utilisateurs standard
              </CardDescription>
            </CardHeader>
            <CardContent className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={userRoleData}
                    cx="50%"
                    cy="50%"
                    labelLine={true}
                    label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {userRoleData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="projects" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Création de projets par mois</CardTitle>
              <CardDescription>
                Nombre de nouveaux projets créés par mois
              </CardDescription>
            </CardHeader>
            <CardContent className="h-[300px] sm:h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={projectCreationData}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="count" fill="#00C49F" name="Projets" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="tags" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Utilisation des tags</CardTitle>
              <CardDescription>
                Nombre d'utilisations par tag
              </CardDescription>
            </CardHeader>
            <CardContent className="h-[300px] sm:h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  layout="vertical"
                  data={tagUsageData}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 60,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" />
                  <YAxis dataKey="name" type="category" />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="value" fill="#FFBB28" name="Utilisations" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="activity" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Utilisateurs actifs par jour</CardTitle>
              <CardDescription>
                Nombre d'utilisateurs actifs par jour de la semaine
              </CardDescription>
            </CardHeader>
            <CardContent className="h-[300px] sm:h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart
                  data={dailyActiveUsersData}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="users" stroke="#FF8042" name="Utilisateurs actifs" />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}