"use client";

import { format, subMonths } from "date-fns";
import { UserPlus, UserCheck, Loader2 } from "lucide-react";
import { Area, AreaChart, Line, LineChart, Bar, BarChart, XAxis } from "recharts";

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { useClientDashboardStats } from "@/hooks/clients/use-client-dashboard";

import { clientsChartConfig, newClientsChartConfig, activeClientsChartConfig } from "./clients.config";

const lastMonth = format(subMonths(new Date(), 1), "LLLL");

const formatPercentage = (value: number) => {
  const sign = value >= 0 ? "+" : "";
  return `${sign}${value.toFixed(1)}%`;
};

export function OverviewCards() {
  const { data: stats, isLoading, error } = useClientDashboardStats();

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        {Array.from({ length: 4 }, (_, i) => (
          <Card key={`loading-card-${i}`} className="flex min-h-48 items-center justify-center">
            <Loader2 className="h-6 w-6 animate-spin" />
          </Card>
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        <Card className="col-span-full">
          <CardContent className="flex min-h-48 items-center justify-center">
            <p className="text-muted-foreground">Erreur lors du chargement des données</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  const {
    totalClients = 0,
    activeClients = 0,
    newClientsThisMonth = 0,
    pendingClients = 0,
    monthlyGrowthRate = 0,
    chartData = {},
  } = stats ?? {};

  // Générer des données de graphique par défaut si elles ne sont pas disponibles
  const defaultChartData = Array.from({ length: 7 }, (_, i) => ({
    date: i + 1,
    totalClients: Math.floor(Math.random() * 50) + 150,
    active: Math.floor(Math.random() * 30) + 100,
  }));

  const defaultNewClientsData = Array.from({ length: 7 }, (_, i) => ({
    date: i + 1,
    newClients: Math.floor(Math.random() * 10) + 5,
  }));

  const defaultEvolutionData = Array.from({ length: 6 }, (_, i) => ({
    month: format(subMonths(new Date(), 5 - i), "MMM"),
    clients: totalClients - Math.floor(Math.random() * 100) + i * 20,
  }));

  const typedChartData = chartData as {
    totalClients?: Array<{ date: number; totalClients: number; active: number }>;
    newClients?: Array<{ date: number; newClients: number }>;
    activeClients?: Array<{ month: string; clients: number }>;
  };

  const clientsChartData = Array.isArray(typedChartData.totalClients) ? typedChartData.totalClients : defaultChartData;
  const newClientsChartData = Array.isArray(typedChartData.newClients)
    ? typedChartData.newClients
    : defaultNewClientsData;
  const activeClientsChartData = Array.isArray(typedChartData.activeClients)
    ? typedChartData.activeClients
    : defaultEvolutionData;

  return (
    <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
      <Card>
        <CardHeader>
          <CardTitle>Total Clients</CardTitle>
          <CardDescription>Nombre total de clients</CardDescription>
        </CardHeader>
        <CardContent className="size-full">
          <ChartContainer className="size-full min-h-24" config={clientsChartConfig}>
            <BarChart accessibilityLayer data={clientsChartData} barSize={8}>
              <XAxis dataKey="date" tickLine={false} tickMargin={10} axisLine={false} hide />
              <ChartTooltip content={<ChartTooltipContent labelFormatter={(label) => `${lastMonth}: ${label}`} />} />
              <Bar
                background={{ fill: "var(--color-background)", radius: 4, opacity: 0.07 }}
                dataKey="totalClients"
                stackId="a"
                fill="var(--color-totalClients)"
                radius={[0, 0, 0, 0]}
              />
              <Bar dataKey="active" stackId="a" fill="var(--color-active)" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ChartContainer>
        </CardContent>
        <CardFooter className="flex items-center justify-between">
          <span className="text-xl font-semibold tabular-nums">{totalClients.toLocaleString()}</span>
          <span className={`text-sm font-medium ${monthlyGrowthRate >= 0 ? "text-green-500" : "text-red-500"}`}>
            {formatPercentage(monthlyGrowthRate)}
          </span>
        </CardFooter>
      </Card>

      <Card className="overflow-hidden pb-0">
        <CardHeader>
          <CardTitle>Nouveaux Clients</CardTitle>
          <CardDescription>Ce mois</CardDescription>
        </CardHeader>
        <CardContent className="flex-1 p-0">
          <ChartContainer className="size-full min-h-24" config={newClientsChartConfig}>
            <AreaChart
              accessibilityLayer
              data={newClientsChartData}
              margin={{
                left: 0,
                right: 0,
                top: 5,
              }}
            >
              <XAxis dataKey="date" tickLine={false} tickMargin={10} axisLine={false} hide />
              <ChartTooltip
                content={<ChartTooltipContent labelFormatter={(label) => `${lastMonth}: ${label}`} hideIndicator />}
              />
              <Area
                dataKey="newClients"
                fill="var(--color-newClients)"
                fillOpacity={0.05}
                stroke="var(--color-newClients)"
                strokeWidth={2}
                type="monotone"
              />
            </AreaChart>
          </ChartContainer>
        </CardContent>
        <CardFooter className="flex items-center justify-between">
          <span className="text-xl font-semibold tabular-nums">{newClientsThisMonth}</span>
        </CardFooter>
      </Card>

      <Card>
        <CardHeader>
          <div className="w-fit rounded-lg bg-green-500/10 p-2">
            <UserCheck className="size-5 text-green-500" />
          </div>
        </CardHeader>
        <CardContent className="flex size-full flex-col justify-between">
          <div className="space-y-1.5">
            <CardTitle>Clients Actifs</CardTitle>
            <CardDescription>Ce mois</CardDescription>
          </div>
          <p className="text-2xl font-medium tabular-nums">{activeClients.toLocaleString()}</p>
          <div className="w-fit rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-500">
            {totalClients > 0 ? ((activeClients / totalClients) * 100).toFixed(1) : 0}%
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="bg-destructive/10 w-fit rounded-lg p-2">
            <UserPlus className="text-destructive size-5" />
          </div>
        </CardHeader>
        <CardContent className="flex size-full flex-col justify-between">
          <div className="space-y-1.5">
            <CardTitle>En Attente</CardTitle>
            <CardDescription>Validation nécessaire</CardDescription>
          </div>
          <p className="text-2xl font-medium tabular-nums">{pendingClients}</p>
          <div className="text-destructive bg-destructive/10 w-fit rounded-md px-2 py-1 text-xs font-medium">
            {pendingClients > 0 ? "Action requise" : "À jour"}
          </div>
        </CardContent>
      </Card>

      <Card className="col-span-1 xl:col-span-2">
        <CardHeader>
          <CardTitle>Évolution des Clients</CardTitle>
          <CardDescription>6 derniers mois</CardDescription>
        </CardHeader>
        <CardContent>
          <ChartContainer config={activeClientsChartConfig} className="h-24 w-full">
            <LineChart
              data={activeClientsChartData}
              margin={{
                top: 5,
                right: 10,
                left: 10,
                bottom: 0,
              }}
            >
              <XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} hide />
              <ChartTooltip content={<ChartTooltipContent />} />
              <Line
                type="monotone"
                strokeWidth={2}
                dataKey="clients"
                stroke="var(--color-clients)"
                activeDot={{
                  r: 6,
                }}
              />
            </LineChart>
          </ChartContainer>
        </CardContent>
        <CardFooter>
          <p className="text-muted-foreground text-sm">
            {formatPercentage(monthlyGrowthRate)} de croissance depuis l&apos;année dernière
          </p>
        </CardFooter>
      </Card>
    </div>
  );
}