// components/reports/bankwiseaum/BankWiseAumStatCards.tsx
"use client";

import { TrendingUp, Building2, ChevronsUpDown, ChevronsDownUp } from "lucide-react";
import { formatNumber } from "@/lib/common";
import { BankWiseAumApiResponse } from "@/types/bank-wise-aum";

interface Props {
  data: BankWiseAumApiResponse | null;
  loading: boolean;
  allExpanded: boolean;
  onExpandAll: () => void;
  onCollapseAll: () => void;
}

export function BankWiseAumStatCards({
  data,
  loading,
  allExpanded,
  onExpandAll,
  onCollapseAll,
}: Props) {
  const cards = [
    {
      label: "Total AUM",
      value: data ? formatNumber(data.totalAum) : "—",
      icon: <TrendingUp className="h-5 w-5 text-blue-500" />,
      iconBg: "bg-blue-50",
    },
    {
      label: "Banks",
      value: data ? String(data.bankCount) : "—",
      icon: <Building2 className="h-5 w-5 text-emerald-500" />,
      iconBg: "bg-emerald-50",
    },
  ];

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
      {/* Stat cards */}
      {cards.map((card) => (
        <div
          key={card.label}
          className="flex items-center gap-4 rounded-xl border border-slate-200 bg-white px-5 py-4 shadow-sm"
        >
          <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${card.iconBg}`}>
            {card.icon}
          </div>
          <div className="space-y-0.5">
            <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">
              {card.label}
            </p>
            <p className="text-2xl font-semibold text-slate-800">
              {loading ? "—" : card.value}
            </p>
          </div>
        </div>
      ))}

      {/* Expand / Collapse control card */}
      <div className="flex items-center gap-4 rounded-xl border border-slate-200 bg-white px-5 py-4 shadow-sm">
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50">
          <ChevronsUpDown className="h-5 w-5 text-slate-500" />
        </div>
        <div className="space-y-1.5">
          <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">
            Banks View
          </p>
          <div className="flex gap-2">
            <button
              onClick={onExpandAll}
              disabled={allExpanded}
              className="inline-flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition"
            >
              <ChevronsUpDown className="h-3 w-3" />
              Expand all
            </button>
            <button
              onClick={onCollapseAll}
              disabled={!allExpanded}
              className="inline-flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition"
            >
              <ChevronsDownUp className="h-3 w-3" />
              Collapse all
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}