"use client";
import { useState, useMemo } 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";

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 toggleSection = (section: string) => {
    setExpandedSections((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(section)) {
        newSet.delete(section);
      } else {
        newSet.add(section);
      }
      return newSet;
    });
  };

  const toggleModule = (moduleKey: string) => {
    setExpandedModules((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(moduleKey)) {
        newSet.delete(moduleKey);
      } else {
        newSet.add(moduleKey);
      }
      return newSet;
    });
  };

  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 getActiveFilterCount = () => {
    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;
  };

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader title="Debt Intelligence Report" description="Loading…" />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  if (!data && !loading && error) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader title="Debt Intelligence Report" description="Failed to load data" />
        <div className="mt-6">
          <ErrorMessage error={error} />
        </div>
        <div className="flex h-64 items-center justify-center">
          <button
            onClick={fetchReport}
            className="px-6 py-3 bg-[#428B4D] text-white rounded-lg hover:bg-[#357a3f] transition-colors font-medium"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!data && !loading) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader title="Debt Intelligence Report" description="No data available" />
        <div className="flex h-64 items-center justify-center">
          <button
            onClick={fetchReport}
            className="px-6 py-3 bg-[#428B4D] text-white rounded-lg hover:bg-[#357a3f] transition-colors font-medium"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-6">
      <PageHeader
        title="Debt Intelligence Report"
        description="Detailed view of liabilities, assets, and income/expense breakdown."
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Reports" },
          { label: "Holdings" },
          { label: "Debt Intelligence" },
        ]}
        actions={
          <div className="flex items-center gap-2">
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-semibold shadow-sm transition-all duration-200 ${
                showFilters
                  ? "border-[#428B4D] bg-[#428B4D] text-white"
                  : "border-[#428B4D]/40 bg-white text-slate-700 hover:bg-[#428B4D] hover:text-white"
              }`}
            >
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              Filters {getActiveFilterCount() > 0 && `(${getActiveFilterCount()})`}
            </button>
            <button
              onClick={fetchReport}
              disabled={loading}
              className="inline-flex items-center gap-2 rounded-lg bg-[#428B4D] px-3 py-1.5 text-xs font-semibold text-white hover:bg-[#357a3d] transition-colors disabled:opacity-50"
            >
              <RefreshCw className={loading ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
              {loading ? "Refreshing…" : "Refresh"}
            </button>
          </div>
        }
      />

      {/* Filters Panel */}
      {showFilters && (
        <ReportFilters
          filters={[
            {
              type: "select",
              label: "Variant Type",
              placeholder: "Select variant type",
              options: [
                { id: "default", label: "Default", value: "default" },
                { id: "macro", label: "Macro", value: "macro" },
                { id: "bridge", label: "Bridge", value: "bridge" },
              ],
              value: reportType,
              onChange: (value) => setReportType(value as "macro" | "bridge" | "default"),
            },
            {
              type: "date",
              label: "From Date",
              placeholder: "Select from date",
              value: fromDate,
              onChange: (value) => setFromDate(value),
            },
            {
              type: "date",
              label: "To Date",
              placeholder: "Select to date",
              value: toDate,
              onChange: (value) => setToDate(value),
            },
            {
              type: "search-multi-select",
              label: "Banks",
              placeholder: "All Banks",
              options: availableBanks.map((bank) => ({
                id: bank.bank_id || bank.id || "",
                label: bank.bank_name,
                value: bank.bank_id || bank.id || "",
              })),
              value: selectedBankIds,
              onChange: (value) => setSelectedBankIds(value),
            },
          ]}
          onApply={() => {
            fetchReport();
            setShowFilters(false);
          }}
          onReset={() => {
            setReportType("default");
            setFromDate("");
            setToDate("");
            const allBankIds = availableBanks.map((bank) => bank.bank_id || bank.id || "");
            setSelectedBankIds(allBankIds);
            setShowFilters(false);
          }}
          loading={loading}
          showFilters={true}
          variant="panel"
          activeFilterCount={getActiveFilterCount()}
        />
      )}

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

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

        {data && (
          <>
            <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>

        {/* Currency Breakdown Tables */}
        <div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-6">
          <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>
  );
}