"use client";

import { useState, useMemo, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ReportFilters } from "@/components/ui/ReportFilters";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useDebtIntelligenceReport } from "@/hooks/useDebtIntelligenceReport";
import { UserInfoCard } from "@/components/reports/debtintelligence/UserInfoCard";
import { ExpandableSection } from "@/components/reports/debtintelligence/ExpandableSection";
import { IncomeSection } from "@/components/reports/debtintelligence/IncomeSection";
import { ExpenseSection } from "@/components/reports/debtintelligence/ExpenseSection";
import { AssetsSection } from "@/components/reports/debtintelligence/AssetsSection";
import { LiabilitiesSection } from "@/components/reports/debtintelligence/LiabilitiesSection";
import { CurrencyBreakdownTable } from "@/components/reports/debtintelligence/CurrencyBreakdownTable";
import { ActiveFiltersDisplay } from "@/components/reports/debtintelligence/ActiveFiltersDisplay";
import {
  formatCurrency,
  getIncomeExpenseData,
  getAssetsLiabilitiesData,
  getFlattenedAssetsByModule,
  getFlattenedLiabilitiesByModule,
} from "@/lib/debt-intelligence-utils";
import { DebtIntelligenceActions } from "@/components/reports/debtintelligence/DebtIntelligenceActions";
import { useDebtIntelligenceFilters } from "@/components/reports/debtintelligence/useDebtIntelligenceFilters";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
  REPORT_PRIMARY_HOVER,
} from "@/app/reports/constants";

function toggleInSet(setter: React.Dispatch<React.SetStateAction<Set<string>>>) {
  return (key: string) => {
    setter((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };
}

export default function DebtIntelligenceReport() {
  const {
    data,
    loading,
    error,
    reportType,
    setReportType,
    fromDate,
    setFromDate,
    toDate,
    setToDate,
    selectedBankIds,
    setSelectedBankIds,
    availableBanks,
    fetchReport,
  } = useDebtIntelligenceReport();

  const [expandedSections, setExpandedSections] = useState<Set<string>>(
    new Set()
  );
  const [expandedModules, setExpandedModules] = useState<Set<string>>(
    new Set()
  );
  const [showFilters, setShowFilters] = useState(false);

  const { filterConfig } = useDebtIntelligenceFilters({
    reportType,
    setReportType,
    fromDate,
    setFromDate,
    toDate,
    setToDate,
    selectedBankIds,
    setSelectedBankIds,
    availableBanks,
  });

  const toggleSection = useCallback(
    toggleInSet(setExpandedSections),
    []
  );
  const toggleModule = useCallback(toggleInSet(setExpandedModules), []);

  const { modules, incomeTotal, expenseTotal } = useMemo(
    () => getIncomeExpenseData(data),
    [data]
  );
  const { assetsTotal, liabilitiesTotal } = useMemo(
    () => getAssetsLiabilitiesData(data),
    [data]
  );
  const flattenedAssets = useMemo(
    () => getFlattenedAssetsByModule(data),
    [data]
  );
  const flattenedLiabilities = useMemo(
    () => getFlattenedLiabilitiesByModule(data),
    [data]
  );
  const incomeByCurrency = useMemo(
    () => data?.income_currency_wise ?? {},
    [data]
  );
  const expenseByCurrency = useMemo(
    () => data?.expense_currency_wise ?? {},
    [data]
  );

  const activeFilterCount = useMemo(() => {
    let count = 0;
    if (reportType && reportType !== "default") count++;
    if (fromDate) count++;
    if (toDate) count++;
    const totalBanks = availableBanks.length;
    if (
      totalBanks > 0 &&
      selectedBankIds.length > 0 &&
      selectedBankIds.length < totalBanks
    )
      count++;
    return count;
  }, [
    reportType,
    fromDate,
    toDate,
    availableBanks.length,
    selectedBankIds.length,
  ]);

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

  const handleResetFilters = useCallback(() => {
    setReportType("default");
    setFromDate("");
    setToDate("");
    setSelectedBankIds(
      availableBanks.map((b) => (b.bank_id ?? (b as { id?: string }).id) ?? "")
    );
    setShowFilters(false);
  }, [
    availableBanks,
    setReportType,
    setFromDate,
    setToDate,
    setSelectedBankIds,
  ]);

  if (loading) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Debt Intelligence Report"
          description="Loading…"
          breadcrumbs={[...BREADCRUMBS.debtIntelligence]}
        />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw
            className="h-8 w-8 animate-spin"
            style={{ color: REPORT_PRIMARY }}
          />
        </div>
      </div>
    );
  }

  if (!data && error) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Debt Intelligence Report"
          description="Failed to load data"
          breadcrumbs={[...BREADCRUMBS.debtIntelligence]}
        />
        <div className="mt-6">
          <ErrorMessage error={error} />
        </div>
        <div className="flex h-64 items-center justify-center">
          <button
            type="button"
            onClick={handleRefresh}
            className="rounded-lg px-6 py-3 font-medium text-white transition-colors"
            style={{ backgroundColor: REPORT_PRIMARY }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = REPORT_PRIMARY_HOVER;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = REPORT_PRIMARY;
            }}
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Debt Intelligence Report"
          description="No data available"
          breadcrumbs={[...BREADCRUMBS.debtIntelligence]}
        />
        <div className="flex h-64 items-center justify-center">
          <button
            type="button"
            onClick={handleRefresh}
            className="rounded-lg px-6 py-3 font-medium text-white transition-colors"
            style={{ backgroundColor: REPORT_PRIMARY }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = REPORT_PRIMARY_HOVER;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = REPORT_PRIMARY;
            }}
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Debt Intelligence Report"
        description="Detailed view of liabilities, assets, and income/expense breakdown."
        breadcrumbs={[...BREADCRUMBS.debtIntelligence]}
        actions={
          <DebtIntelligenceActions
            isLoading={loading}
            onRefresh={handleRefresh}
            onToggleFilters={handleToggleFilters}
            showFilters={showFilters}
            activeFilterCount={activeFilterCount}
          />
        }
      />

      {showFilters && (
        <ReportFilters
          filters={filterConfig}
          onApply={handleApplyFilters}
          onReset={handleResetFilters}
          loading={loading}
          showFilters={true}
          variant="panel"
          activeFilterCount={activeFilterCount}
        />
      )}

      {error && (
        <ErrorMessage
          error={error}
          onDismiss={() => {}}
          className="mt-6"
        />
      )}

      <div className="mt-6">
        <ActiveFiltersDisplay
          fromDate={fromDate}
          toDate={toDate}
          onClear={() => {
            setFromDate("");
            setToDate("");
          }}
        />

        <UserInfoCard data={data} />

        <ExpandableSection
          title="INCOME"
          amount={formatCurrency(incomeTotal, data.code)}
          isExpanded={expandedSections.has("income")}
          onToggle={() => toggleSection("income")}
          bgColor="bg-green-50"
          hoverColor="hover:bg-green-100"
          textColor="text-green-700"
        >
          <IncomeSection
            data={data}
            modules={modules}
            expandedModules={expandedModules}
            onToggleModule={toggleModule}
          />
        </ExpandableSection>

        <ExpandableSection
          title="ASSETS"
          amount={formatCurrency(assetsTotal, data.code)}
          isExpanded={expandedSections.has("assets")}
          onToggle={() => toggleSection("assets")}
          bgColor="bg-blue-50"
          hoverColor="hover:bg-blue-100"
          textColor="text-blue-700"
        >
          <AssetsSection
            data={data}
            flattenedAssets={flattenedAssets}
            expandedModules={expandedModules}
            onToggleModule={toggleModule}
          />
        </ExpandableSection>

        <ExpandableSection
          title="EXPENSES"
          amount={formatCurrency(Math.abs(expenseTotal), data.code)}
          isExpanded={expandedSections.has("expenses")}
          onToggle={() => toggleSection("expenses")}
          bgColor="bg-red-50"
          hoverColor="hover:bg-red-100"
          textColor="text-red-700"
        >
          <ExpenseSection
            data={data}
            modules={modules}
            expandedModules={expandedModules}
            onToggleModule={toggleModule}
          />
        </ExpandableSection>

        <ExpandableSection
          title="LIABILITIES"
          amount={formatCurrency(Math.abs(liabilitiesTotal), data.code)}
          isExpanded={expandedSections.has("liabilities")}
          onToggle={() => toggleSection("liabilities")}
          bgColor="bg-orange-50"
          hoverColor="hover:bg-orange-100"
          textColor="text-orange-700"
        >
          <LiabilitiesSection
            data={data}
            flattenedLiabilities={flattenedLiabilities}
            expandedModules={expandedModules}
            onToggleModule={toggleModule}
          />
        </ExpandableSection>

        <div className="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
          <CurrencyBreakdownTable
            title="Income by Currency"
            data={incomeByCurrency}
            bgColor="bg-green-50"
            textColor="text-green-700"
            emptyMessage="No income data available"
          />
          <CurrencyBreakdownTable
            title="Expense by Currency"
            data={expenseByCurrency}
            bgColor="bg-red-50"
            textColor="text-red-600"
            emptyMessage="No expense data available"
          />
        </div>
      </div>
    </div>
  );
}