"use client";

import { TrendingUp, Building, UserCheck, Loader2 } from "lucide-react";
import { PieChart, Pie, Cell } from "recharts";

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

const typeClientConfig = {
  particuliers: {
    label: "Particuliers",
    color: "var(--chart-1)",
  },
  entreprises: {
    label: "Entreprises",
    color: "var(--chart-2)",
  },
};

const CustomTooltipContent = ({ data }: { data: Array<{ name: string; value: number; fill: string }> }) => (
  <ul className="ml-8 flex flex-col gap-3">
    {data.map((item) => (
      <li key={item.name} className="flex w-36 items-center justify-between">
        <span className="flex items-center gap-2 capitalize">
          <span className="size-2.5 rounded-full" style={{ background: item.fill }} />
          {item.name}
        </span>
        <span className="tabular-nums">{item.value}</span>
      </li>
    ))}
  </ul>
);

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat("fr-CA", {
    style: "currency",
    currency: "CAD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(amount);
};

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

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={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 md:grid-cols-2 lg:grid-cols-4">
        <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 insights</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  const {
    averageAccountBalance = 0,
    activationRate = 0,
    topBranch = "N/A",
    monthlyGrowthRate = 0,
    clientsByType = { particuliers: 0, entreprises: 0 },
  } = stats || {};

  const typeClientData = [
    { name: "Particuliers", value: clientsByType.particuliers, fill: "var(--chart-1)" },
    { name: "Entreprises", value: clientsByType.entreprises, fill: "var(--chart-2)" },
  ];

  return (
    <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs md:grid-cols-2 lg:grid-cols-4">
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Solde Moyen par Compte</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            {formatCurrency(averageAccountBalance)}
          </CardTitle>
          <CardAction>
            <Badge variant="outline">
              <TrendingUp />
              {monthlyGrowthRate >= 0 ? `+${monthlyGrowthRate.toFixed(1)}` : monthlyGrowthRate.toFixed(1)}%
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            {monthlyGrowthRate >= 0 ? "Croissance soutenue" : "Baisse temporaire"} <TrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">
            {monthlyGrowthRate >= 0 ? "Augmentation" : "Diminution"} depuis le mois dernier
          </div>
        </CardFooter>
      </Card>

      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Taux d&apos;Activation</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            {activationRate.toFixed(1)}%
          </CardTitle>
          <CardAction>
            <Badge variant="outline">
              <UserCheck />
              {activationRate >= 80 ? "Excellent" : activationRate >= 60 ? "Bon" : "À améliorer"}
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Taux {activationRate >= 80 ? "élevé" : activationRate >= 60 ? "moyen" : "faible"}{" "}
            <UserCheck className="size-4" />
          </div>
          <div className="text-muted-foreground">Clients actifs sur total inscrit</div>
        </CardFooter>
      </Card>

      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Succursale la Plus Active</CardDescription>
          <CardTitle className="text-lg font-semibold @[250px]/card:text-xl">{topBranch}</CardTitle>
          <CardAction>
            <Badge variant="outline">
              <Building />
              #1
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Performance leader <Building className="size-4" />
          </div>
          <div className="text-muted-foreground">Basé sur le nombre de clients actifs</div>
        </CardFooter>
      </Card>

      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Répartition par Type</CardDescription>
          <CardTitle className="text-base font-medium">Particuliers vs Entreprises</CardTitle>
        </CardHeader>
        <CardContent className="flex items-center justify-center">
          <ChartContainer config={typeClientConfig} className="mx-auto aspect-square max-h-32">
            <PieChart>
              <ChartTooltip cursor={false} content={<CustomTooltipContent data={typeClientData} />} />
              <Pie data={typeClientData} dataKey="value" nameKey="name" innerRadius={40} strokeWidth={5}>
                {typeClientData.map((entry) => (
                  <Cell key={entry.name} fill={entry.fill} />
                ))}
              </Pie>
            </PieChart>
          </ChartContainer>
        </CardContent>
        <CardFooter className="gap-2">
          <Button size="sm" variant="outline" className="basis-1/2">
            Voir Détails
          </Button>
          <Button size="sm" variant="outline" className="basis-1/2">
            Rapport CSV
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}