"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 { PlusCircle, Users, FolderKanban, Tags } from "lucide-react";
import Link from "next/link";

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

  // Mock data for the dashboard
  const stats = [
    {
      title: "Projets",
      value: "5",
      description: "Projets actifs",
      icon: FolderKanban,
      href: "/projects",
    },
    {
      title: "Personnes",
      value: "42",
      description: "Personnes enregistrées",
      icon: Users,
      href: "/persons",
    },
    {
      title: "Tags",
      value: "12",
      description: "Tags disponibles",
      icon: Tags,
      href: "/tags",
    },
  ];

  // Mock data for recent projects
  const recentProjects = [
    {
      id: 1,
      name: "Projet Formation Dev Web",
      description: "Création de groupes pour la formation développement web",
      date: "2025-05-15",
      groups: 4,
      persons: 16,
    },
    {
      id: 2,
      name: "Projet Hackathon",
      description: "Équipes pour le hackathon annuel",
      date: "2025-05-10",
      groups: 8,
      persons: 32,
    },
    {
      id: 3,
      name: "Projet Workshop UX/UI",
      description: "Groupes pour l'atelier UX/UI",
      date: "2025-05-05",
      groups: 5,
      persons: 20,
    },
  ];

  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">Tableau de bord</h1>
        <Button asChild className="w-full sm:w-auto">
          <Link href="/projects/new">
            <PlusCircle className="mr-2 h-4 w-4" />
            Nouveau projet
          </Link>
        </Button>
      </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="analytics" className="flex-1 sm:flex-none">Analytiques</TabsTrigger>
          <TabsTrigger value="reports" className="flex-1 sm:flex-none">Rapports</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-3">
            {stats.map((stat, index) => (
              <Card key={index}>
                <CardHeader className="flex flex-row items-center justify-between pb-2">
                  <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                  <div className="flex items-center justify-center">
                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                  </div>
                </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}>Voir tous</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
          <div className="grid gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Projets récents</CardTitle>
                <CardDescription>
                  Vous avez {recentProjects.length} projets récents
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col gap-4">
                  {recentProjects.map((project) => (
                    <div key={project.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b pb-4 last:border-0 last:pb-0">
                      <div className="flex flex-col gap-2 min-w-0">
                        <div className="flex flex-col gap-1">
                          <p className="font-medium truncate">{project.name}</p>
                          <p className="text-sm text-muted-foreground line-clamp-2">{project.description}</p>
                        </div>
                        <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-xs text-muted-foreground">
                          <span>{new Date(project.date).toLocaleDateString("fr-FR")}</span>
                          <span>{project.groups} groupes</span>
                          <span>{project.persons} personnes</span>
                        </div>
                      </div>
                      <div className="flex sm:flex-shrink-0">
                        <Button variant="outline" asChild className="w-full sm:w-auto">
                          <Link href={`/projects/${project.id}`}>Voir</Link>
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
        <TabsContent value="analytics" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Analytiques</CardTitle>
              <CardDescription>
                Visualisez les statistiques de vos projets et groupes
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex h-[300px] items-center justify-center rounded-md border border-dashed">
                <p className="text-sm text-muted-foreground">
                  Les graphiques d'analytiques seront disponibles prochainement
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="reports" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Rapports</CardTitle>
              <CardDescription>
                Générez des rapports sur vos projets et groupes
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex h-[300px] items-center justify-center rounded-md border border-dashed">
                <p className="text-sm text-muted-foreground">
                  La génération de rapports sera disponible prochainement
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}