"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, TrendingDown, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface StatsSummaryCardsProps {
  totalIncome: number;
  totalExpenses: number;
  avgMonthlyExpenses: number;
  formatCurrency: (amount: number) => string;
}

export function StatsSummaryCards({
  totalIncome,
  totalExpenses,
  avgMonthlyExpenses,
  formatCurrency,
}: StatsSummaryCardsProps) {
  const savings = totalIncome - totalExpenses;

  return (
    <div className="grid gap-3 md:gap-4 grid-cols-2 md:grid-cols-4">
      <Card className="stat-card-textured relative overflow-hidden">
        {/* Icône en arrière-plan */}
        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <TrendingUp
            className="h-16 w-16 md:h-20 md:w-20 text-success"
            strokeWidth={1}
          />
        </div>
        <CardHeader className="pb-3 px-5 pt-5 relative z-10">
          <CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
            Total Revenus
          </CardTitle>
        </CardHeader>
        <CardContent className="px-5 pb-5 pt-0 relative z-10">
          <div className="text-xl md:text-2xl font-black text-success tracking-tight">
            {formatCurrency(totalIncome)}
          </div>
        </CardContent>
      </Card>

      <Card className="stat-card-textured relative overflow-hidden">
        {/* Icône en arrière-plan */}
        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <TrendingDown
            className="h-16 w-16 md:h-20 md:w-20 text-destructive"
            strokeWidth={1}
          />
        </div>
        <CardHeader className="pb-3 px-5 pt-5 relative z-10">
          <CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
            Total Dépenses
          </CardTitle>
        </CardHeader>
        <CardContent className="px-5 pb-5 pt-0 relative z-10">
          <div className="text-xl md:text-2xl font-black text-destructive tracking-tight">
            {formatCurrency(totalExpenses)}
          </div>
        </CardContent>
      </Card>

      <Card className="stat-card-textured relative overflow-hidden">
        {/* Icône en arrière-plan */}
        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <ArrowRight
            className="h-16 w-16 md:h-20 md:w-20 text-muted-foreground/40"
            strokeWidth={1}
          />
        </div>
        <CardHeader className="pb-3 px-5 pt-5 relative z-10">
          <CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
            Moyenne mensuelle
          </CardTitle>
        </CardHeader>
        <CardContent className="px-5 pb-5 pt-0 relative z-10">
          <div className="text-xl md:text-2xl font-black tracking-tight">
            {formatCurrency(avgMonthlyExpenses)}
          </div>
        </CardContent>
      </Card>

      <Card className="stat-card-textured relative overflow-hidden">
        {/* Icône en arrière-plan */}
        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <div
            className={cn(
              "h-16 w-16 md:h-20 md:w-20 rounded-full border-2",
              savings >= 0 ? "border-success" : "border-destructive",
            )}
          />
        </div>
        <CardHeader className="pb-3 px-5 pt-5 relative z-10">
          <CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
            Économies
          </CardTitle>
        </CardHeader>
        <CardContent className="px-5 pb-5 pt-0 relative z-10">
          <div
            className={cn(
              "text-xl md:text-2xl font-black tracking-tight",
              savings >= 0 ? "text-success" : "text-destructive",
            )}
          >
            {formatCurrency(savings)}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}