"use client";

/**
 * Page de gestion des utilisateurs - COOP-CA AMIFOND
 *
 * Page principale pour la gestion des utilisateurs avec tableau CRUD et statistiques
 */

import { Suspense } from "react";

import { Users, BarChart3, Settings, Shield, UserPlus, TrendingUp } from "lucide-react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import { UsersStats } from "./_components/users-stats";
import { UsersTableCrud } from "./_components/users-table-crud";

// Composants de chargement
function TableSkeleton() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Skeleton className="h-8 w-64" />
        <div className="flex space-x-2">
          <Skeleton className="h-8 w-24" />
          <Skeleton className="h-8 w-24" />
          <Skeleton className="h-8 w-32" />
        </div>
      </div>
      <div className="space-y-2">
        {Array.from({ length: 10 }, (_, index) => (
          <Skeleton key={`skeleton-row-${index + 1}`} className="h-12 w-full" />
        ))}
      </div>
    </div>
  );
}

function StatsSkeleton() {
  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }, (_, index) => (
          <Card key={`stats-skeleton-${index + 1}`}>
            <CardHeader>
              <Skeleton className="h-4 w-24" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16" />
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

export default function UsersPage() {
  return (
    <div className="flex flex-col gap-4 md:gap-6">
      {/* En-tête de la page */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Gestion des utilisateurs</h1>
          <p className="text-muted-foreground">
            Gérez les comptes utilisateurs, permissions et accès de la coopérative
          </p>
        </div>
        <div className="flex items-center space-x-2">
          <Shield className="h-5 w-5 text-blue-600" />
          <span className="text-sm font-medium text-blue-600">Accès sécurisé administrateur</span>
        </div>
      </div>

      {/* Onglets principaux */}
      <Tabs defaultValue="users" className="space-y-4 md:space-y-6">
        <TabsList className="grid w-full grid-cols-3 lg:w-[400px]">
          <TabsTrigger value="users" className="flex items-center space-x-2">
            <Users className="h-4 w-4" />
            <span>Utilisateurs</span>
          </TabsTrigger>
          <TabsTrigger value="stats" className="flex items-center space-x-2">
            <BarChart3 className="h-4 w-4" />
            <span>Statistiques</span>
          </TabsTrigger>
          <TabsTrigger value="settings" className="flex items-center space-x-2">
            <Settings className="h-4 w-4" />
            <span>Paramètres</span>
          </TabsTrigger>
        </TabsList>

        {/* Contenu de l'onglet Utilisateurs */}
        <TabsContent value="users" className="space-y-4 md:space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Users className="h-5 w-5" />
                <span>Liste des utilisateurs</span>
              </CardTitle>
              <CardDescription>
                Visualisez, recherchez et gérez tous les comptes utilisateurs de la coopérative
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<TableSkeleton />}>
                <UsersTableCrud />
              </Suspense>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Contenu de l'onglet Statistiques */}
        <TabsContent value="stats" className="space-y-4 md:space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <TrendingUp className="h-5 w-5" />
                <span>Statistiques et métriques</span>
              </CardTitle>
              <CardDescription>Analyses et insights sur les utilisateurs et leur activité</CardDescription>
            </CardHeader>
            <CardContent>
              <Suspense fallback={<StatsSkeleton />}>
                <UsersStats />
              </Suspense>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Contenu de l'onglet Paramètres */}
        <TabsContent value="settings" className="space-y-4 md:space-y-6">
          <div className="grid gap-4 md:grid-cols-2 md:gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <UserPlus className="h-5 w-5" />
                  <span>Paramètres d&apos;inscription</span>
                </CardTitle>
                <CardDescription>Configuration des règles d&apos;inscription des nouveaux utilisateurs</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h4 className="text-sm font-medium">Inscription libre</h4>
                      <p className="text-muted-foreground text-sm">
                        Permet aux utilisateurs de créer leur propre compte
                      </p>
                    </div>
                    <div className="text-sm font-medium text-orange-600">Désactivé</div>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h4 className="text-sm font-medium">Vérification email obligatoire</h4>
                      <p className="text-muted-foreground text-sm">Les nouveaux comptes doivent vérifier leur email</p>
                    </div>
                    <div className="text-sm font-medium text-green-600">Activé</div>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h4 className="text-sm font-medium">Approbation manuelle</h4>
                      <p className="text-muted-foreground text-sm">
                        Les nouveaux comptes nécessitent une approbation admin
                      </p>
                    </div>
                    <div className="text-sm font-medium text-green-600">Activé</div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Shield className="h-5 w-5" />
                  <span>Sécurité et permissions</span>
                </CardTitle>
                <CardDescription>Paramètres de sécurité et gestion des permissions</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h4 className="text-sm font-medium">Authentification 2FA</h4>
                      <p className="text-muted-foreground text-sm">
                        Authentification à deux facteurs pour les administrateurs
                      </p>
                    </div>
                    <div className="text-sm font-medium text-orange-600">Recommandé</div>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h4 className="text-sm font-medium">Verrouillage automatique</h4>
                      <p className="text-muted-foreground text-sm">
                        Verrouillage après 5 tentatives de connexion échouées
                      </p>
                    </div>
                    <div className="text-sm font-medium text-green-600">Activé</div>
                  </div>

                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h4 className="text-sm font-medium">Expiration des sessions</h4>
                      <p className="text-muted-foreground text-sm">
                        Sessions expirées après 8 heures d&apos;inactivité
                      </p>
                    </div>
                    <div className="text-sm font-medium text-green-600">Activé</div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Types d&apos;utilisateurs et permissions</CardTitle>
                <CardDescription>Hiérarchie des rôles et permissions dans le système</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                  {[
                    { role: "Super Admin", level: "100", color: "bg-black", permissions: "Accès complet" },
                    { role: "Admin", level: "90", color: "bg-red-600", permissions: "Administration générale" },
                    { role: "Manager", level: "80", color: "bg-orange-600", permissions: "Gestion opérationnelle" },
                    {
                      role: "Directeur Régional",
                      level: "70",
                      color: "bg-yellow-600",
                      permissions: "Gestion régionale",
                    },
                    {
                      role: "Directeur d&apos;Agence",
                      level: "60",
                      color: "bg-green-600",
                      permissions: "Gestion d&apos;agence",
                    },
                    { role: "Employé", level: "40", color: "bg-blue-600", permissions: "Opérations courantes" },
                    { role: "Client", level: "10", color: "bg-gray-600", permissions: "Consultation des comptes" },
                  ].map((item) => (
                    <div key={item.role} className="rounded-lg border p-4">
                      <div className="mb-2 flex items-center space-x-3">
                        <div className={`h-3 w-3 rounded-full ${item.color}`}></div>
                        <span className="text-sm font-medium">{item.role}</span>
                        <span className="text-muted-foreground text-xs">Niv. {item.level}</span>
                      </div>
                      <p className="text-muted-foreground text-xs">{item.permissions}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}