fintrack/components/dashboard/overview-cards.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  TrendingUp,
  TrendingDown,
  Wallet,
  CreditCard,
  Tag,
} from "lucide-react";
import type { BankingData } from "@/lib/types";
import { getAccountBalance } from "@/lib/account-utils";
import { cn } from "@/lib/utils";

interface OverviewCardsProps {
  data: BankingData;
}

export function OverviewCards({ data }: OverviewCardsProps) {
  const totalBalance = data.accounts.reduce(
    (sum, acc) => sum + getAccountBalance(acc),
    0
  );

  const thisMonth = new Date();
  thisMonth.setDate(1);
  const thisMonthStr = thisMonth.toISOString().slice(0, 7);

  const monthTransactions = data.transactions.filter((t) =>
    t.date.startsWith(thisMonthStr)
  );

  const income = monthTransactions
    .filter((t) => t.amount > 0)
    .reduce((sum, t) => sum + t.amount, 0);

  const expenses = monthTransactions
    .filter((t) => t.amount < 0)
    .reduce((sum, t) => sum + Math.abs(t.amount), 0);

  const reconciled = data.transactions.filter((t) => t.isReconciled).length;
  const total = data.transactions.length;
  const reconciledPercent =
    total > 0 ? Math.round((reconciled / total) * 100) : 0;

  const categorized = data.transactions.filter(
    (t) => t.categoryId !== null
  ).length;
  const categorizedPercent =
    total > 0 ? Math.round((categorized / total) * 100) : 0;

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(amount);
  };

  return (
    <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-5">
      <Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
            Solde Total
          </CardTitle>
          <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
            <Wallet className="h-5 w-5 text-primary" />
          </div>
        </CardHeader>
        <CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 lg:px-5 lg:pb-5 pt-0 relative z-10">
          <div
            className={cn(
              "text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words",
              totalBalance >= 0
                ? "text-emerald-600 dark:text-emerald-400"
                : "text-red-600 dark:text-red-400"
            )}
          >
            {formatCurrency(totalBalance)}
          </div>
          <p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
            {data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
          </p>
        </CardContent>
      </Card>

      <Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
            Revenus du mois
          </CardTitle>
          <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
            <TrendingUp className="h-5 w-5 text-success" />
          </div>
        </CardHeader>
        <CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 lg:px-5 lg:pb-5 pt-0 relative z-10">
          <div className="text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight text-success mb-4 leading-none break-words">
            {formatCurrency(income)}
          </div>
          <p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
            {monthTransactions.filter((t) => t.amount > 0).length} opération
            {monthTransactions.filter((t) => t.amount > 0).length > 1
              ? "s"
              : ""}
          </p>
        </CardContent>
      </Card>

      <Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
            Dépenses du mois
          </CardTitle>
          <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
            <TrendingDown className="h-5 w-5 text-destructive" />
          </div>
        </CardHeader>
        <CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 lg:px-5 lg:pb-5 pt-0 relative z-10">
          <div className="text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight text-destructive mb-4 leading-none break-words">
            {formatCurrency(expenses)}
          </div>
          <p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
            {monthTransactions.filter((t) => t.amount < 0).length} opération
            {monthTransactions.filter((t) => t.amount < 0).length > 1
              ? "s"
              : ""}
          </p>
        </CardContent>
      </Card>

      <Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
            Pointage
          </CardTitle>
          <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
            <CreditCard className="h-5 w-5 text-chart-4" />
          </div>
        </CardHeader>
        <CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 lg:px-5 lg:pb-5 pt-0 relative z-10">
          <div className="text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words">
            {reconciledPercent}%
          </div>
          <p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
            {reconciled} / {total} opérations pointées
          </p>
        </CardContent>
      </Card>

      <Card className="stat-card-gradient-5 card-hover group relative overflow-hidden">
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
            Catégorisation
          </CardTitle>
          <div className="rounded-2xl bg-gradient-to-br from-chart-5/30 via-chart-5/20 to-chart-5/10 p-3 shrink-0 shadow-lg shadow-chart-5/20">
            <Tag className="h-5 w-5 text-chart-5" />
          </div>
        </CardHeader>
        <CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 lg:px-5 lg:pb-5 pt-0 relative z-10">
          <div className="text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words">
            {categorizedPercent}%
          </div>
          <p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
            {categorized} / {total} opérations catégorisées
          </p>
        </CardContent>
      </Card>
    </div>
  );
}