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

import { formatNumber } from "@/lib/common";
import { BankWiseAumDetailRow } from "@/types/bank-wise-aum";

interface Props {
  rows: BankWiseAumDetailRow[];
  groupLabel: string;   // e.g. "Asset Class", "Sector", etc.
  loading?: boolean;
}

function ProgressBar({ pct }: { pct: number }) {
  return (
    <div className="flex items-center gap-2">
      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-slate-100">
        <div
          className="h-full rounded-full bg-blue-500 transition-all duration-500"
          style={{ width: `${Math.min(pct, 100)}%` }}
        />
      </div>
      <span className="min-w-[36px] text-right text-xs font-semibold text-blue-600">
        {pct.toFixed(1)}%
      </span>
    </div>
  );
}

function SkeletonRow() {
  return (
    <tr className="animate-pulse">
      <td className="px-4 py-3"><div className="h-3 w-40 rounded bg-slate-100" /></td>
      <td className="px-4 py-3"><div className="h-3 w-28 rounded bg-slate-100 ml-auto" /></td>
      <td className="px-4 py-3"><div className="h-3 w-28 rounded bg-slate-100 ml-auto" /></td>
      <td className="px-4 py-3"><div className="h-3 w-24 rounded bg-slate-100 ml-auto" /></td>
    </tr>
  );
}

export function BankWiseAumDetailTable({ rows, groupLabel, loading = false }: Props) {
  const dataRows  = rows.filter((r) => !r.isTotal);
  const totalRow  = rows.find((r) => r.isTotal);

  return (
    <div className="overflow-hidden rounded-b-xl border-t border-slate-200">
      <table className="w-full text-sm">
        {/* ── Dark header ── */}
        <thead>
          <tr className="bg-[#1e2a3b] text-white">
            <th className="px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider">
              {groupLabel}
            </th>
            <th className="px-5 py-3 text-right text-[11px] font-semibold uppercase tracking-wider">
              Purchase Value
            </th>
            <th className="px-5 py-3 text-right text-[11px] font-semibold uppercase tracking-wider">
              Market Value (AUM)
            </th>
            <th className="px-5 py-3 text-right text-[11px] font-semibold uppercase tracking-wider">
              % of Bank
            </th>
          </tr>
        </thead>

        {/* ── Body ── */}
        <tbody className="divide-y divide-slate-100 bg-white">
          {loading ? (
            Array.from({ length: 4 }).map((_, i) => <SkeletonRow key={i} />)
          ) : dataRows.length === 0 ? (
            <tr>
              <td colSpan={4} className="py-10 text-center text-sm text-slate-400">
                No data available.
              </td>
            </tr>
          ) : (
            dataRows.map((row) => (
              <tr key={row.id} className="transition-colors hover:bg-slate-50/70">
               <td className="px-5 py-3 text-slate-800">
                {row.label.replace(/<[^>]*>/g, "")}
                </td>
                <td className="px-5 py-3 text-right tabular-nums text-slate-700">
                  {formatNumber(row.purchaseValue)}
                </td>
                <td className="px-5 py-3 text-right tabular-nums text-slate-700">
                  {formatNumber(row.marketValue)}
                </td>
                <td className="px-5 py-3 text-right">
                  <ProgressBar pct={row.percentageOfBank} />
                </td>
              </tr>
            ))
          )}
        </tbody>

        {/* ── Total row ── */}
        {totalRow && !loading && (
          <tfoot>
            <tr className="border-t-2 border-slate-200 bg-white">
              <td className="px-5 py-3 text-sm font-bold text-blue-700">
                {totalRow.label}
              </td>
              <td className="px-5 py-3 text-right text-sm font-bold tabular-nums text-blue-700">
                {formatNumber(totalRow.purchaseValue)}
              </td>
              <td className="px-5 py-3 text-right text-sm font-bold tabular-nums text-blue-700">
                {formatNumber(totalRow.marketValue)}
              </td>
              <td className="px-5 py-3 text-right text-sm font-bold text-blue-700">
                <ProgressBar pct={totalRow.percentageOfBank} />
              </td>
            </tr>
          </tfoot>
        )}
      </table>
    </div>
  );
}