import { useMemo, useState } from "react";
import { CashBalanceData } from "@/hooks/useCashBalanceReport";
import { formatNumber } from "@/lib/report-utils";

interface TableRow {
  bank_name: string;
  bank_id: string;
  type: "data" | "fixed" | "leverage";
  label: string;
  values: Record<string, number>;
}

interface CashBalanceTableProps {
  data: CashBalanceData | null;
  highlighted: string | null;
  onHighlight: (currency: string | null) => void;
}

export function CashBalanceTable({ data, highlighted, onHighlight }: CashBalanceTableProps) {
  const [pageSize, setPageSize] = useState<number>(10);
  const [currentPage, setCurrentPage] = useState<number>(1);

  const tableStructure = useMemo(() => {
    if (!data?.balance_items?.length) return { rows: [], currencies: [], totals: {} };
    const currencies = Array.from(new Set(data.balance_items.map(i => i.code).filter(Boolean) as string[])).sort();
    const banksMap = new Map<string, string>();
    data.balance_items.forEach(i => banksMap.set(i.bank_id, i.bank_name));

    const dataArray: Record<string, number> = {};
    const fixedArray: Record<string, number> = {};
    const leverageArray: Record<string, number> = {};

    data.balance_items.forEach(i => {
      const key = `${i.bank_name}${i.code}`;
      dataArray[key] = i.data_balance;
      fixedArray[key] = i.fixed_balance;
      leverageArray[key] = i.leverage_balance;
    });

    const rows: TableRow[] = [];
    Array.from(banksMap.entries()).forEach(([bankId, bankName]) => {
      const addRow = (type: "data" | "fixed" | "leverage", label: string, source: Record<string, number>) => {
        const values = currencies.reduce((acc, c) => ({ ...acc, [c]: source[`${bankName}${c}`] || 0 }), {} as Record<string, number>);
        const total = Object.values(values).reduce((a, b) => a + b, 0);
        if (total !== 0) rows.push({ bank_name: bankName, bank_id: bankId, type, label, values });
      };

      addRow("data", bankName, dataArray);
      addRow("fixed", `${bankName} (FD)`, fixedArray);
      addRow("leverage", `${bankName} (Loan)`, leverageArray);
    });

    const totals = currencies.reduce((acc, c) => ({
      ...acc,
      [c]: data.totals.amount_array_total[c] || 0
    }), {} as Record<string, number>);

    return { rows, currencies, totals };
  }, [data]);

  const paginatedRows = useMemo(() => {
    const start = (currentPage - 1) * pageSize;
    const end = pageSize === Infinity ? tableStructure.rows.length : start + pageSize;
    return tableStructure.rows.slice(start, end);
  }, [tableStructure.rows, currentPage, pageSize]);

  const totalPages = pageSize === Infinity ? 1 : Math.ceil(tableStructure.rows.length / pageSize);

  const getRowClasses = (type: "data" | "fixed" | "leverage") => {
    switch (type) {
      case "fixed": return "bg-green-50 hover:bg-green-100/50";
      case "leverage": return "bg-red-50 hover:bg-red-100/50";
      default: return "hover:bg-slate-50/50";
    }
  };

  return (
    <div className="rounded-lg border border-white/70 bg-white/95 p-4 shadow-xl ring-1 ring-black/5 md:p-6">
      <div className="mb-4 flex flex-col items-end gap-3 sm:flex-row sm:justify-between">
        <div />
        <div className="flex flex-col items-end gap-3 sm:flex-row sm:items-center">
          <div className="flex items-center gap-2 text-sm text-slate-600">
            <span>Show</span>
            <select
              value={pageSize === Infinity ? "All" : pageSize}
              onChange={(e) => {
                const val = e.target.value === "All" ? Infinity : Number(e.target.value);
                setPageSize(val);
                setCurrentPage(1);
              }}
              className="rounded-lg border border-slate-300 bg-white px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-[#428B4D]/40"
            >
              {[10, 20, 30, "All"].map(size => (
                <option key={size} value={size}>{size}</option>
              ))}
            </select>
            <span>entries</span>
          </div>

          <div className="flex items-center gap-1">
            <button
              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
              disabled={currentPage === 1}
              className={`px-3 py-1.5 text-sm rounded-lg border ${currentPage === 1 ? "border-slate-200 bg-slate-50 text-slate-400 cursor-not-allowed" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"}`}
            >
              Previous
            </button>
            <span className="px-3 py-1.5 text-sm text-slate-700">
              Page {currentPage} of {totalPages}
            </span>
            <button
              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
              disabled={currentPage === totalPages}
              className={`px-3 py-1.5 text-sm rounded-lg border ${currentPage === totalPages ? "border-slate-200 bg-slate-50 text-slate-400 cursor-not-allowed" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"}`}
            >
              Next
            </button>
          </div>
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b-2 border-slate-200 bg-slate-50">
              <th className="px-4 py-3 text-left font-semibold text-slate-700 sticky left-0 bg-slate-50 z-10 min-w-[200px]">
                Bank Name
              </th>
              {tableStructure.currencies.map(currency => (
                <th
                  key={currency}
                  onClick={() => onHighlight(highlighted === currency ? null : currency)}
                  className={`px-4 py-3 text-right font-semibold cursor-pointer transition-all duration-300 whitespace-nowrap ${
                    highlighted === currency
                      ? "bg-[#428B4D]/20 text-[#428B4D] border-b-2 border-[#428B4D]"
                      : "text-slate-700 hover:bg-[#428B4D]/5"
                  }`}
                >
                  {currency}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {tableStructure.rows.length === 0 ? (
              <tr>
                <td colSpan={tableStructure.currencies.length + 1} className="px-4 py-8 text-center text-slate-500">
                  No data available
                </td>
              </tr>
            ) : (
              paginatedRows.map((row, idx) => (
                <tr
                  key={`${row.bank_id}-${row.type}-${idx}`}
                  className={`border-b border-slate-100 transition-colors ${getRowClasses(row.type)}`}
                >
                  <td className="px-4 py-3 font-medium text-slate-800 sticky left-0 z-10 bg-inherit min-w-[200px]">
                    {row.label}
                  </td>
                  {tableStructure.currencies.map(currency => {
                    const value = row.values[currency] || 0;
                    return (
                      <td
                        key={currency}
                        className={`px-4 py-3 text-right font-medium transition-all duration-300 whitespace-nowrap ${
                          highlighted === currency ? "bg-[#428B4D]/10 text-[#428B4D] font-semibold" : "text-slate-700"
                        }`}
                      >
                        {value !== 0 ? formatNumber(value) : ""}
                      </td>
                    );
                  })}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      <div className="mt-4 text-center text-xs text-slate-500">
        Showing {(currentPage - 1) * pageSize + 1} to{" "}
        {pageSize === Infinity ? tableStructure.rows.length : Math.min(currentPage * pageSize, tableStructure.rows.length)} of{" "}
        {tableStructure.rows.length} entries
      </div>
    </div>
  );
}