/**
 * Page Dashboard - COOP-CA AMIFOND
 *
 * Page d'accueil après authentification
 */

"use client";

import { Users, DollarSign, PiggyBank, CreditCard } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useAuth } from "@/hooks/auth/use-auth-queries";
import { usePermissions } from "@/stores/auth/auth-store";

export default function DashboardPage() {
  const { user } = useAuth();
  const permissions = usePermissions();

  const formatUserType = (userType: string) => {
    const types: Record<string, string> = {
      client: "Client",
      employee: "Employé",
      accountant: "Comptable",
      loan_officer: "Agent de crédit",
      branch_manager: "Directeur de succursale",
      regional_manager: "Directeur régional",
      auditor: "Auditeur",
      it_support: "Support IT",
      manager: "Manager",
      admin: "Administrateur",
      superuser: "Super Administrateur",
    };
    return types[userType] || userType;
  };

  return (
    <div className="container mx-auto space-y-6 p-6">
      {/* En-tête avec informations utilisateur */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Bienvenue, {user?.first_name || user?.email}!</h1>
          <p className="text-muted-foreground">Connecté en tant que {formatUserType(user?.user_type || "")}</p>
        </div>
      </div>

      {/* Informations utilisateur */}
      <Card>
        <CardHeader>
          <CardTitle>Informations du profil</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm font-medium">Email</p>
              <p className="text-muted-foreground text-sm">{user?.email}</p>
            </div>
            <div>
              <p className="text-sm font-medium">Type d'utilisateur</p>
              <p className="text-muted-foreground text-sm">{formatUserType(user?.user_type || "")}</p>
            </div>
            <div>
              <p className="text-sm font-medium">Statut</p>
              <p className="text-muted-foreground text-sm">{user?.is_active ? "✅ Actif" : "❌ Inactif"}</p>
            </div>
            <div>
              <p className="text-sm font-medium">Vérifié</p>
              <p className="text-muted-foreground text-sm">{user?.is_verified ? "✅ Vérifié" : "❌ Non vérifié"}</p>
            </div>
            {user?.employee_id && (
              <div>
                <p className="text-sm font-medium">ID Employé</p>
                <p className="text-muted-foreground text-sm">{user.employee_id}</p>
              </div>
            )}
            {user?.department && (
              <div>
                <p className="text-sm font-medium">Département</p>
                <p className="text-muted-foreground text-sm">{user.department}</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Raccourcis selon les permissions */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
        {permissions.canManageUsers && (
          <Card className="cursor-pointer transition-shadow hover:shadow-md">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Gestion des utilisateurs</CardTitle>
              <Users className="text-muted-foreground h-4 w-4" />
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-xs">Gérer les comptes utilisateurs</p>
            </CardContent>
          </Card>
        )}

        {permissions.isClient && (
          <>
            <Card className="cursor-pointer transition-shadow hover:shadow-md">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Mon épargne</CardTitle>
                <PiggyBank className="text-muted-foreground h-4 w-4" />
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-xs">Consulter mes comptes d'épargne</p>
              </CardContent>
            </Card>

            <Card className="cursor-pointer transition-shadow hover:shadow-md">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Mes prêts</CardTitle>
                <CreditCard className="text-muted-foreground h-4 w-4" />
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-xs">Voir mes demandes de prêt</p>
              </CardContent>
            </Card>
          </>
        )}

        {permissions.canAccessReports && (
          <Card className="cursor-pointer transition-shadow hover:shadow-md">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Rapports financiers</CardTitle>
              <DollarSign className="text-muted-foreground h-4 w-4" />
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-xs">Consulter les rapports</p>
            </CardContent>
          </Card>
        )}
      </div>

      {/* Section de debug pour le développement */}
      {process.env.NODE_ENV === "development" && (
        <Card>
          <CardHeader>
            <CardTitle>Debug - Informations utilisateur</CardTitle>
          </CardHeader>
          <CardContent>
            <pre className="bg-muted overflow-auto rounded p-4 text-xs">{JSON.stringify(user, null, 2)}</pre>
          </CardContent>
        </Card>
      )}
    </div>
  );
}