"use client";

import { CheckCircle2, Clock, DollarSign, Receipt } from "lucide-react";

import type { TransactionsSummary } from "@/api/rtk/transactions-api";
import { KPICard } from "@/components/ui/kpi-card";
import { Skeleton } from "@/components/ui/skeleton";

const kpiCardClass =
  "bg-white/50 dark:bg-white/10 backdrop-blur-[15px] border border-white/40 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] py-4";

function formatMoney(amount: number): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(amount);
}

const EMPTY_SUMMARY: TransactionsSummary = {
  totalAmount: 0,
  paidAmount: 0,
  paidCount: 0,
  pendingAmount: 0,
  pendingCount: 0,
};

export function TransactionsSummaryStrip({
  total,
  summary,
  isLoading,
  isUpdating,
}: {
  total: number;
  summary?: TransactionsSummary;
  isLoading?: boolean;
  isUpdating?: boolean;
}) {
  const s = summary ?? EMPTY_SUMMARY;
  const updatingSuffix = isUpdating ? " · updating" : "";

  if (isLoading) {
    return (
      <div
        className="grid grid-cols-2 gap-3.5 md:grid-cols-4"
        aria-label="Transaction summary"
        aria-busy="true"
      >
        {Array.from({ length: 4 }).map((_, i) => (
          <div
            key={i}
            className="flex flex-col gap-2 rounded-xl border border-border p-4"
          >
            <Skeleton className="h-3 w-24 rounded bg-border/70" />
            <Skeleton className="h-6 w-20 rounded bg-border/60" />
            <Skeleton className="h-3 w-28 rounded bg-border/50" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <section aria-label="Transaction summary">
      <div className="grid grid-cols-2 gap-3.5 md:grid-cols-4">
        <KPICard
          label="Total transactions"
          value={total.toString()}
          subtext={`matching filters${updatingSuffix}`}
          icon={<Receipt size={16} aria-hidden />}
          className={kpiCardClass}
        />
        <KPICard
          label="Total amount"
          value={formatMoney(s.totalAmount)}
          subtext={`across ${total} transaction${total === 1 ? "" : "s"}${updatingSuffix}`}
          icon={<DollarSign size={16} aria-hidden />}
          className={kpiCardClass}
        />
        <KPICard
          label="Paid amount"
          value={formatMoney(s.paidAmount)}
          subtext={`${s.paidCount} paid${updatingSuffix}`}
          icon={<CheckCircle2 size={16} aria-hidden />}
          className={kpiCardClass}
        />
        <KPICard
          label="Pending amount"
          value={formatMoney(s.pendingAmount)}
          subtext={`${s.pendingCount} pending${updatingSuffix}`}
          icon={<Clock size={16} aria-hidden />}
          className={kpiCardClass}
        />
      </div>
    </section>
  );
}