"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 { Button } from "@/components/ui/button";
import { Users, Shield, Tags, Settings, BarChart4 } from "lucide-react";
import Link from "next/link";

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

  // Mock data for the admin dashboard
  const stats = [
    {
      title: "Utilisateurs",
      value: "24",
      description: "Utilisateurs actifs",
      icon: Users,
      href: "/admin/users",
    },
    {
      title: "Tags globaux",
      value: "18",
      description: "Tags disponibles",
      icon: Tags,
      href: "/admin/tags",
    },
    {
      title: "Projets",
      value: "32",
      description: "Projets créés",
      icon: BarChart4,
      href: "/admin/stats",
    },
    {
      title: "Paramètres",
      value: "7",
      description: "Paramètres système",
      icon: Settings,
      href: "/admin/settings",
    },
  ];

  // Mock data for recent activities
  const recentActivities = [
    {
      id: 1,
      user: "Jean Dupont",
      action: "a créé un nouveau projet",
      target: "Formation Dev Web",
      date: "2025-05-15T14:32:00",
    },
    {
      id: 2,
      user: "Marie Martin",
      action: "a modifié un tag global",
      target: "Frontend",
      date: "2025-05-15T13:45:00",
    },
    {
      id: 3,
      user: "Admin",
      action: "a ajouté un nouvel utilisateur",
      target: "Pierre Durand",
      date: "2025-05-15T11:20:00",
    },
    {
      id: 4,
      user: "Sophie Lefebvre",
      action: "a créé un nouveau groupe",
      target: "Groupe A",
      date: "2025-05-15T10:15:00",
    },
    {
      id: 5,
      user: "Admin",
      action: "a modifié les paramètres système",
      target: "Paramètres de notification",
      date: "2025-05-14T16:30:00",
    },
  ];

  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">Administration</h1>
        <div className="flex items-center gap-2">
          <Shield className="h-5 w-5 text-primary" />
          <span className="text-sm text-muted-foreground">Mode administrateur</span>
        </div>
      </div>

      <Tabs defaultValue="overview" className="space-y-4" onValueChange={setActiveTab}>
        <TabsList className="w-full flex justify-start overflow-auto">
          <TabsTrigger value="overview" className="flex-1 sm:flex-none">Vue d'ensemble</TabsTrigger>
          <TabsTrigger value="activity" className="flex-1 sm:flex-none">Activité récente</TabsTrigger>
          <TabsTrigger value="system" className="flex-1 sm:flex-none">Système</TabsTrigger>
        </TabsList>
        
        <TabsContent value="overview" className="space-y-4">
          <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 text-muted-foreground">{stat.description}</p>
                  <Button variant="link" asChild className="px-0 mt-2">
                    <Link href={stat.href}>Gérer</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>
        
        <TabsContent value="activity" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Activité récente</CardTitle>
              <CardDescription>
                Les dernières actions effectuées sur la plateforme
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentActivities.map((activity) => (
                  <div key={activity.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border-b pb-4 last:border-0 last:pb-0">
                    <div className="space-y-1">
                      <p className="font-medium">
                        <span className="font-semibold">{activity.user}</span> {activity.action}{" "}
                        <span className="font-semibold">{activity.target}</span>
                      </p>
                      <p className="text-sm text-muted-foreground">
                        {new Date(activity.date).toLocaleString("fr-FR", {
                          dateStyle: "medium",
                          timeStyle: "short",
                        })}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="system" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Informations système</CardTitle>
              <CardDescription>
                Informations sur l'état du système
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <p className="text-sm font-medium">Version de l'application</p>
                    <p className="text-sm text-muted-foreground">v1.0.0</p>
                  </div>
                  <div className="space-y-2">
                    <p className="text-sm font-medium">Dernière mise à jour</p>
                    <p className="text-sm text-muted-foreground">15 mai 2025</p>
                  </div>
                  <div className="space-y-2">
                    <p className="text-sm font-medium">État du serveur</p>
                    <div className="flex items-center gap-2">
                      <div className="h-2 w-2 rounded-full bg-green-500"></div>
                      <p className="text-sm text-muted-foreground">En ligne</p>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <p className="text-sm font-medium">Utilisation de la base de données</p>
                    <p className="text-sm text-muted-foreground">42%</p>
                  </div>
                </div>
                
                <div className="pt-4">
                  <Button asChild>
                    <Link href="/admin/settings">
                      <Settings className="mr-2 h-4 w-4" />
                      Paramètres système
                    </Link>
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}