"use client";

import { useState, useMemo, useCallback } from "react";
import { DataTable } from "@/components/datatable/data-table";
import { columns } from "@/components/datatable/listdepositsreport/columns";
import { PageHeader } from "@/components/ui/PageHeader";
import { ReportFilters } from "@/components/ui/ReportFilters";
import { useDepositReport } from "@/hooks/useDepositReport";
import { StatCards } from "@/components/reports/common/StatCards";
import { DownloadButton } from "@/components/reports/common/DownloadButton";
import { DepositReportActions } from "@/components/reports/deposit/DepositReportActions";
import { useDepositFilters } from "@/components/reports/deposit/useDepositFilters";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { REPORT_PAGE_CONTAINER } from "@/app/reports/constants";

export default function DepositReport() {
  const {
    data,
    totals,
    availableCurrencies,
    availableBanks,
    selectedBanks,
    selectedCurrencies,
    setSelectedBanks,
    setSelectedCurrencies,
    loading,
    loadData,
  } = useDepositReport();

  const [highlighted, setHighlighted] = useState<string | null>(null);
  const [showFilters, setShowFilters] = useState(false);

  const { filterConfig } = useDepositFilters({
    availableBanks,
    availableCurrencies,
    selectedBanks,
    selectedCurrencies,
    setSelectedBanks,
    setSelectedCurrencies,
  });

  const activeFilterCount = useMemo(() => {
    let count = 0;
    const totalBanks = availableBanks.length;
    if (
      totalBanks > 0 &&
      selectedBanks.length > 0 &&
      selectedBanks.length < totalBanks
    )
      count++;
    const totalCurrencies = availableCurrencies.length;
    if (
      totalCurrencies > 0 &&
      selectedCurrencies.length > 0 &&
      selectedCurrencies.length < totalCurrencies
    )
      count++;
    return count;
  }, [
    availableBanks.length,
    availableCurrencies.length,
    selectedBanks.length,
    selectedCurrencies.length,
  ]);

  const handleToggleFilters = useCallback(
    () => setShowFilters((p) => !p),
    []
  );
  const handleRefresh = useCallback(() => loadData(), [loadData]);
  const handleApplyFilters = useCallback(() => {
    loadData();
    setShowFilters(false);
  }, [loadData]);

  const handleResetFilters = useCallback(() => {
    const allBankIds = availableBanks.map((b) => b.bank_id);
    const allCurrencyIds = availableCurrencies.map((c) => c.currency_id);
    setSelectedBanks(allBankIds);
    setSelectedCurrencies(allCurrencyIds);
    setTimeout(() => loadData(), 0);
  }, [
    availableBanks,
    availableCurrencies,
    setSelectedBanks,
    setSelectedCurrencies,
    loadData,
  ]);

  const currencies = useMemo(
    () => Object.keys(totals).sort(),
    [totals]
  );

  const helperTextMap = useMemo(() => {
    const map: Record<string, string> = {};
    currencies.forEach((code) => {
      map[code] = `${code} Details`;
    });
    return map;
  }, [currencies]);

  const downloadBody = useMemo(() => {
    const body: Record<string, string> = {};
    if (selectedBanks.length > 0) {
      body.bank_id = selectedBanks.join("|");
    }
    if (selectedCurrencies.length > 0) {
      const selectedCodes = selectedCurrencies
        .map((id) =>
          availableCurrencies.find((c) => c.currency_id === id)?.code
        )
        .filter((c): c is string => Boolean(c));
      if (selectedCodes.length > 0) {
        body.currency = selectedCodes.join("|");
      }
    }
    return body;
  }, [selectedBanks, selectedCurrencies, availableCurrencies]);

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Deposit Report"
        description="View all deposit transactions and details."
        breadcrumbs={[...BREADCRUMBS.depositLiquidity]}
        actions={
          <DepositReportActions
            isLoading={loading}
            onRefresh={handleRefresh}
            onToggleFilters={handleToggleFilters}
            showFilters={showFilters}
            activeFilterCount={activeFilterCount}
          />
        }
      />

      {showFilters && (
        <div className="mt-6">
          <ReportFilters
            filters={filterConfig}
            onApply={handleApplyFilters}
            onReset={handleResetFilters}
            variant="panel"
            showFilters={true}
            activeFilterCount={activeFilterCount}
          />
        </div>
      )}

      {currencies.length > 0 && (
        <StatCards
          totals={totals}
          currencies={currencies}
          highlighted={highlighted}
          onHighlight={setHighlighted}
          loading={loading}
          className="mb-8"
          helperTextMap={helperTextMap}
        />
      )}

      <DownloadButton
        endpoint="/api/reports/liquidity/deposit"
        filenamePrefix="OXYFINZ-Deposit-Report"
        body={downloadBody}
        className="mb-4"
      />

      <DataTable columns={columns} data={data} />
    </div>
  );
}