"use client";

/**
 * Statistiques des utilisateurs - COOP-CA AMIFOND
 *
 * Composant pour afficher les statistiques et métriques des utilisateurs
 * Design inspiré du thème Amifond Green avec des cards modernes
 */

import { Activity, Clock, Shield, TrendingUp, UserCheck, Users } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useUserStats } from "@/hooks/users/use-users-queries";
import { UserType } from "@/types/auth";

// Configuration des couleurs et icônes par type d'utilisateur avec thème Amifond
const USER_TYPE_CONFIG: Record<UserType, { label: string; color: string; icon: string }> = {
  client: { label: "Clients", color: "hsl(var(--primary))", icon: "👥" },
  super_admin: { label: "Super Administrateurs", color: "hsl(var(--destructive))", icon: "👑" },
  ca_member: { label: "Membres CA", color: "hsl(var(--secondary))", icon: "🏛️" },
  manager: { label: "Managers", color: "hsl(var(--accent))", icon: "👨‍💼" },
  account_manager: { label: "Gestionnaires de comptes", color: "hsl(var(--primary))", icon: "📊" },
  cashier: { label: "Caissiers", color: "hsl(var(--muted))", icon: "💰" },
  it_staff: { label: "Personnel IT", color: "hsl(var(--accent))", icon: "💻" },
  other_staff: { label: "Autres Personnel", color: "hsl(var(--muted))", icon: "👨‍💼" },
  agency_agent: { label: "Agents d'agence", color: "hsl(var(--secondary))", icon: "🏢" },
  community_leader: { label: "Chefs de communauté", color: "hsl(var(--primary))", icon: "🌍" },
};

interface StatsCardProps {
  title: string;
  value: number | string;
  description?: string;
  icon: React.ReactNode;
  trend?: {
    value: number;
    label: string;
    isPositive?: boolean;
  };
}

function StatsCard({ title, value, description, icon, trend }: StatsCardProps) {
  return (
    <Card className="from-primary/5 to-card @container/card bg-gradient-to-t shadow-xs">
      <CardHeader>
        <CardDescription className="text-primary">{title}</CardDescription>
        <CardTitle className="text-primary text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
          {value}
        </CardTitle>
        <div className="ml-auto">{icon}</div>
      </CardHeader>
      <CardContent>
        {description && <p className="text-muted-foreground mb-2 text-sm">{description}</p>}
        {trend && (
          <div className="flex items-center gap-2">
            <Badge variant="outline" className="border-primary/20 text-primary">
              <TrendingUp className="mr-1 h-3 w-3" />+{trend.value} {trend.label}
            </Badge>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

function UserTypeBreakdown({ usersByType }: { usersByType: Record<UserType, number> }) {
  const totalUsers = Object.values(usersByType).reduce((sum, count) => sum + count, 0);

  return (
    <Card className="from-primary/5 to-card col-span-2 bg-gradient-to-t shadow-xs">
      <CardHeader>
        <CardTitle className="text-primary">Répartition par type d&apos;utilisateur</CardTitle>
        <CardDescription>Distribution des utilisateurs par rôle dans la coopérative</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          {Object.entries(usersByType)
            .filter(([, count]) => count > 0)
            .sort(([, a], [, b]) => b - a)
            .map(([type, count]) => {
              const config = USER_TYPE_CONFIG[type as UserType];
              const percentage = ((count / totalUsers) * 100).toFixed(1);

              return (
                <div
                  key={type}
                  className="border-primary/20 bg-primary/5 hover:bg-primary/10 flex items-center justify-between rounded-lg border p-3 transition-colors"
                >
                  <div className="flex items-center space-x-3">
                    <span className="text-xl">{config.icon}</span>
                    <div>
                      <p className="text-primary text-sm font-medium">{config.label}</p>
                      <p className="text-muted-foreground text-xs">{percentage}% du total</p>
                    </div>
                  </div>
                  <Badge variant="outline" className="border-primary/20 text-primary font-mono">
                    {count}
                  </Badge>
                </div>
              );
            })}
        </div>
      </CardContent>
    </Card>
  );
}

function LoadingStats() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {Array.from({ length: 4 }, (_, index) => (
        <Card key={`loading-stat-${index}`}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-4 rounded" />
          </CardHeader>
          <CardContent>
            <Skeleton className="mb-2 h-8 w-16" />
            <Skeleton className="h-3 w-32" />
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

export function UsersStats() {
  const { data: stats, isLoading, error } = useUserStats();

  if (error) {
    return (
      <Card className="col-span-full">
        <CardContent className="flex h-32 items-center justify-center">
          <div className="text-center">
            <p className="text-destructive mb-2">Erreur lors du chargement des statistiques</p>
            <p className="text-muted-foreground text-sm">Veuillez réessayer plus tard</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (isLoading) {
    return <LoadingStats />;
  }

  if (!stats) {
    return null;
  }

  const growthRate = stats.total_users > 0 ? ((stats.recent_registrations / stats.total_users) * 100).toFixed(1) : "0";
  const activityRate = stats.total_users > 0 ? ((stats.active_users / stats.total_users) * 100).toFixed(1) : "0";
  const verificationRate = stats.total_users > 0 ? ((stats.verified_users / stats.total_users) * 100).toFixed(1) : "0";

  return (
    <div className="space-y-6">
      {/* Statistiques principales */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
        <StatsCard
          title="Total utilisateurs"
          value={stats.total_users.toLocaleString()}
          description="Base d'utilisateurs en expansion"
          icon={<Users className="text-primary h-4 w-4" />}
          trend={{
            value: stats.recent_registrations,
            label: "ce mois",
            isPositive: true,
          }}
        />

        <StatsCard
          title="Utilisateurs actifs"
          value={stats.active_users.toLocaleString()}
          description={`${activityRate}% du total - Engagement fort`}
          icon={<UserCheck className="text-primary h-4 w-4" />}
        />

        <StatsCard
          title="Utilisateurs vérifiés"
          value={stats.verified_users.toLocaleString()}
          description={`${verificationRate}% vérifiés - Sécurité prioritaire`}
          icon={<Shield className="text-primary h-4 w-4" />}
        />

        <StatsCard
          title="Connexions récentes"
          value={stats.last_week_logins.toLocaleString()}
          description="Utilisation régulière du système"
          icon={<Activity className="text-primary h-4 w-4" />}
        />
      </div>

      {/* Métriques détaillées */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <StatsCard
          title="Nouvelles inscriptions"
          value={`+${stats.recent_registrations}`}
          description="Croissance mensuelle soutenue"
          icon={<TrendingUp className="text-primary h-4 w-4" />}
          trend={{
            value: stats.recent_registrations,
            label: "ce mois",
            isPositive: true,
          }}
        />

        <StatsCard
          title="Taux de croissance"
          value={`${growthRate}%`}
          description="Objectifs de développement atteints"
          icon={<TrendingUp className="text-primary h-4 w-4" />}
          trend={{
            value: parseFloat(growthRate),
            label: "mensuel",
            isPositive: parseFloat(growthRate) > 0,
          }}
        />

        <StatsCard
          title="Activité hebdomadaire"
          value={stats.last_week_logins.toLocaleString()}
          description="Engagement utilisateur stable"
          icon={<Clock className="text-primary h-4 w-4" />}
        />
      </div>

      {/* Répartition et sécurité */}
      <div className="grid gap-4 md:grid-cols-3">
        <UserTypeBreakdown usersByType={stats.users_by_type} />

        {/* Statuts de sécurité */}
        <Card className="from-primary/5 to-card bg-gradient-to-t shadow-xs">
          <CardHeader>
            <CardTitle className="text-primary">Sécurité des comptes</CardTitle>
            <CardDescription>État de vérification et sécurité</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <div className="bg-primary h-3 w-3 rounded-full"></div>
                <span className="text-sm">Comptes vérifiés</span>
              </div>
              <Badge variant="outline" className="border-primary/20 text-primary">
                {stats.verified_users}
              </Badge>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <div className="bg-secondary h-3 w-3 rounded-full"></div>
                <span className="text-sm">Non vérifiés</span>
              </div>
              <Badge variant="outline" className="border-secondary/20 text-secondary-foreground">
                {stats.total_users - stats.verified_users}
              </Badge>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <div className="bg-muted h-3 w-3 rounded-full"></div>
                <span className="text-sm">Comptes inactifs</span>
              </div>
              <Badge variant="outline" className="border-muted/20 text-muted-foreground">
                {stats.total_users - stats.active_users}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}