import { useMemo, useState } from "react";
import { CashReportData } from "@/hooks/useCashReport";
import { formatNumber, parseNumeric } from "@/lib/report-utils";
import { logger } from "@/lib/logger";

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

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

  const tableData = useMemo(() => {
    if (!data?.cash_items?.length) {
      logger.debug("CashReportTable: No data available", { data });
      return { rows: [], currencies: [] };
    }

    const currencies = Array.from(new Set(data.cash_items.map(i => i.code))).sort();
    const banksMap = new Map<string, string>();

    // Build banks map from all data items
    data.cash_items.forEach(item => {
      if (!banksMap.has(item.bank_id)) {
        banksMap.set(item.bank_id, item.bank_name);
      }
    });

    const rows = Array.from(banksMap).map(([bankId, bankName]) => {
      const row: Record<string, any> = { bank_id: bankId, bank_name: bankName };
      currencies.forEach(c => {
        const item = data.cash_items.find(d => d.bank_id === bankId && d.code === c);
        row[c] = item ? formatNumber(parseNumeric(item.balance)) : "";
      });
      return row;
    });

    logger.debug("CashReportTable: Processed data", {
      totalRows: rows.length,
      currencies: currencies.length,
      currenciesList: currencies,
    });

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

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

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

  if (!data?.cash_items?.length) {
    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="text-center py-12 text-slate-500">
          <p className="text-lg font-medium mb-2">No cash data available</p>
          <p className="text-sm">There are no cash items to display.</p>
        </div>
      </div>
    );
  }

  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 border-slate-200 bg-slate-50">
              <th className="px-4 py-3 text-left font-semibold text-slate-700">Bank Name</th>
              {tableData.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 ${
                    highlighted === currency
                      ? "bg-[#428B4D]/20 text-[#428B4D] border-b-2 border-[#428B4D]"
                      : "text-slate-700 hover:bg-[#428B4D]/5"
                  }`}
                >
                  {currency}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {paginatedRows.map((row, idx) => (
              <tr key={idx} className="border-b border-slate-100 hover:bg-slate-50/50 transition-colors">
                <td className="px-4 py-3 font-medium text-slate-800">{row.bank_name}</td>
                {tableData.currencies?.map(currency => (
                  <td
                    key={currency}
                    className={`px-4 py-3 text-right font-medium transition-all duration-300 ${
                      highlighted === currency ? "bg-[#428B4D]/10 text-[#428B4D] font-semibold" : "text-slate-700"
                    }`}
                  >
                    {row[currency] || ""}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

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