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

import { useState } from "react";
import { ChevronDown, ChevronUp, Building2 } from "lucide-react";
import { formatNumber } from "@/lib/common";
import {
  BankWiseAumBankRow,
  BankGroupingTab,
  BankWiseAumDetailRow,
} from "@/types/bank-wise-aum";
import { BankWiseAumDetailTable } from "./BankWiseAumDetailTable";

interface Props {
  bank: BankWiseAumBankRow;
  totalAum: number;
  isOpen: boolean;
  onToggle: () => void;
}

const TABS: { id: BankGroupingTab; label: string; icon: React.ReactNode }[] = [
  {
    id: "assetClass",
    label: "Asset Class",
    icon: (
      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
        <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" />
        <rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
      </svg>
    ),
  },
  {
    id: "assetType",
    label: "Asset Type",
    icon: (
      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
        <circle cx="9" cy="9" r="6" /><circle cx="15" cy="15" r="6" />
      </svg>
    ),
  },
  {
    id: "sector",
    label: "Sector",
    icon: (
      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
        <path d="M3 3v18h18" /><path d="M7 16l4-4 4 4 5-5" />
      </svg>
    ),
  },
  {
    id: "geography",
    label: "Geography",
    icon: (
      <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
        <circle cx="12" cy="12" r="9" />
        <path d="M3.6 9h16.8M3.6 15h16.8M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9z" />
      </svg>
    ),
  },
];

const TAB_TO_KEY: Record<BankGroupingTab, keyof BankWiseAumBankRow> = {
  assetClass: "by_class",
  assetType:  "by_type",
  sector:     "by_sector",
  geography:  "by_geo",
};

const GROUP_LABEL: Record<BankGroupingTab, string> = {
  assetClass: "Asset Class",
  assetType:  "Asset Type",
  sector:     "Sector",
  geography:  "Geography",
};

function buildDetailRows(
  map: Record<string, { aum: number; pv: number }>,
  totalAum: number
): BankWiseAumDetailRow[] {
  const entries = Object.entries(map);
  if (entries.length === 0) return [];

  const dataRows: BankWiseAumDetailRow[] = entries.map(([label, val], idx) => ({
    id: String(idx),
    label,
    purchaseValue: val.pv,
    marketValue: val.aum,
    percentageOfBank: totalAum > 0 ? parseFloat(((val.aum / totalAum) * 100).toFixed(1)) : 0,
  }));

  const totalPv = dataRows.reduce((s, r) => s + r.purchaseValue, 0);
  const totalMv = dataRows.reduce((s, r) => s + r.marketValue,   0);

  const totalRow: BankWiseAumDetailRow = {
    id: "total",
    label: "Total",
    purchaseValue: totalPv,
    marketValue: totalMv,
    percentageOfBank: 100,
    isTotal: true,
  };

  return [...dataRows, totalRow];
}

export function BankWiseAumBankCard({ bank, totalAum, isOpen, onToggle }: Props) {
  const [activeTab, setActiveTab] = useState<BankGroupingTab>("assetClass");

  const pct = totalAum > 0 ? (bank.marketValue / totalAum) * 100 : 0;

  const activeMap  = bank[TAB_TO_KEY[activeTab]] as Record<string, { aum: number; pv: number }>;
  const detailRows = buildDetailRows(activeMap ?? {}, bank.marketValue);

  return (
    <div
      className={`overflow-hidden rounded-xl border transition-shadow
        ${isOpen
          ? "border-blue-200 bg-blue-50/30 shadow-md"
          : "border-slate-200 bg-white shadow-sm hover:shadow-md"
        }`}
    >
      {/* ── Header ── */}
      <button
        onClick={onToggle}
        className="flex w-full items-center gap-4 px-5 py-4 text-left"
      >
        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm">
          <Building2 className="h-5 w-5" />
        </div>

        <div className="flex-1 text-left">
          <p className="text-sm font-semibold text-slate-800">{bank.bankName}</p>
          <p className="text-xs text-slate-400">{bank.currency ?? "USD"}</p>
        </div>

        <div className="flex items-center gap-5">
          <div className="text-right">
            <p className="text-[10px] font-semibold uppercase tracking-wider text-slate-400">
              Market Value (AUM)
            </p>
            <p className="text-base font-semibold text-slate-800">
              {formatNumber(bank.marketValue)}
            </p>
          </div>

          <div className="hidden sm:block">
            <div className="mb-1 h-1.5 w-32 overflow-hidden rounded-full bg-slate-100">
              <div
                className="h-full rounded-full bg-blue-500 transition-all duration-700"
                style={{ width: `${Math.min(pct, 100)}%` }}
              />
            </div>
            <p className="text-right text-[11px] font-semibold text-slate-500">
              {pct.toFixed(1)}% of total
            </p>
          </div>

          <div className="text-slate-400">
            {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          </div>
        </div>
      </button>

      {/* ── Expanded content ── */}
      {isOpen && (
        <div>
          <div className="border-t border-slate-100 px-5">
            <div className="flex gap-0">
              {TABS.map((tab) => {
                const active = tab.id === activeTab;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`flex items-center gap-1.5 border-b-2 px-4 py-3 text-xs font-semibold
                                transition-colors
                                ${active
                                  ? "border-blue-600 text-blue-600"
                                  : "border-transparent text-slate-500 hover:text-slate-800"
                                }`}
                  >
                    {tab.icon}
                    {tab.label}
                  </button>
                );
              })}
            </div>
          </div>

          <BankWiseAumDetailTable
            rows={detailRows}
            groupLabel={GROUP_LABEL[activeTab]}
            loading={false}
          />
        </div>
      )}
    </div>
  );
}