"use client";

import { useMemo, useState, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ReportFilters } from "@/components/ui/ReportFilters";
import {
  useConsolidatedHoldingsReport,
  ASSET_CLASS_MAPPING,
} from "@/hooks/useConsolidatedHoldingsReport";
import { SummaryCards } from "@/components/reports/consolidated/SummaryCards";
import { PieChartSection } from "@/components/reports/consolidated/PieChartSection";
import { AssetClassTable } from "@/components/reports/consolidated/AssetClassTable";
import { DetailedHoldingsTable } from "@/components/reports/consolidated/DetailedHoldingsTable";
import { SelectedBanksInfo } from "@/components/reports/consolidated/SelectedBanksInfo";
import {
  createPieData,
  createAssetClassSummary,
} from "@/lib/consolidated-holdings-utils";
import { ConsolidatedActions } from "@/components/reports/consolidated/ConsolidatedActions";
import { useConsolidatedFilters } from "@/components/reports/consolidated/useConsolidatedFilters";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
} 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 ConsolidatedHoldingsReport() {
  const {
    data,
    loading,
    error,
    filters,
    setFilters,
    fetchReport,
  } = useConsolidatedHoldingsReport();

  const [showFilters, setShowFilters] = useState(false);
  const [expandedAssetClasses, setExpandedAssetClasses] = useState<
    Set<string>
  >(new Set());
  const [expandedAssetTypes, setExpandedAssetTypes] = useState<Set<string>>(
    new Set()
  );
  const [hiddenPieItems, setHiddenPieItems] = useState<Set<string>>(new Set());

  const { filterConfig } = useConsolidatedFilters({
    data,
    filters,
    setFilters,
  });

  const pieData = useMemo(() => createPieData(data), [data]);
  const assetClassSummary = useMemo(
    () => createAssetClassSummary(data),
    [data]
  );

  const togglePieItem = useCallback(toggleInSet(setHiddenPieItems), []);
  const toggleAssetClass = useCallback(
    toggleInSet(setExpandedAssetClasses),
    []
  );
  const toggleAssetType = useCallback(toggleInSet(setExpandedAssetTypes), []);

  const activeFilterCount = useMemo(() => {
    let count = 0;
    if (filters.variantType && filters.variantType !== "default") count++;
    const totalBanks = data?.banks?.length || 0;
    if (
      totalBanks > 0 &&
      filters.bank_ids.length > 0 &&
      filters.bank_ids.length < totalBanks
    )
      count++;
    const totalAssetClasses = Object.keys(ASSET_CLASS_MAPPING).length;
    if (
      totalAssetClasses > 0 &&
      filters.asset_class.length > 0 &&
      filters.asset_class.length < totalAssetClasses
    )
      count++;
    const totalCurrencies = data?.currencyList?.length || 0;
    if (
      totalCurrencies > 0 &&
      filters.currency.length > 0 &&
      filters.currency.length < totalCurrencies
    )
      count++;
    return count;
  }, [filters, data]);

  const expandAllGlobal = useCallback(() => {
    if (!data) return;
    const allClasses = new Set(data.asset_classes.map((ac) => ac.name));
    const allTypes = new Set<string>();
    data.asset_classes.forEach((ac) => {
      ac.asset_types.forEach((_, atIdx) => {
        allTypes.add(`${ac.name}-${atIdx}`);
      });
    });
    setExpandedAssetClasses(allClasses);
    setExpandedAssetTypes(allTypes);
  }, [data]);

  const collapseAllGlobal = useCallback(() => {
    setExpandedAssetClasses(new Set());
    setExpandedAssetTypes(new Set());
  }, []);

  const expandAllForAssetClass = useCallback((assetClassName: string) => {
    if (!data) return;
    const assetClass = data.asset_classes.find(
      (ac) => ac.name === assetClassName
    );
    if (!assetClass) return;
    setExpandedAssetTypes((prev) => {
      const next = new Set(prev);
      assetClass.asset_types.forEach((_, atIdx) => {
        next.add(`${assetClassName}-${atIdx}`);
      });
      return next;
    });
  }, [data]);

  const collapseAllForAssetClass = useCallback((assetClassName: string) => {
    if (!data) return;
    const assetClass = data.asset_classes.find(
      (ac) => ac.name === assetClassName
    );
    if (!assetClass) return;
    setExpandedAssetTypes((prev) => {
      const next = new Set(prev);
      assetClass.asset_types.forEach((_, atIdx) => {
        next.delete(`${assetClassName}-${atIdx}`);
      });
      return next;
    });
  }, [data]);

  const isAllExpanded = useMemo(() => {
    if (!data) return false;
    const allClassesExpanded = data.asset_classes.every((ac) =>
      expandedAssetClasses.has(ac.name)
    );
    let allTypesExpanded = true;
    data.asset_classes.forEach((ac) => {
      ac.asset_types.forEach((_, atIdx) => {
        if (!expandedAssetTypes.has(`${ac.name}-${atIdx}`)) {
          allTypesExpanded = false;
        }
      });
    });
    return allClassesExpanded && allTypesExpanded;
  }, [data, expandedAssetClasses, expandedAssetTypes]);

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

  const handleResetFilters = useCallback(() => {
    if (!data) return;
    const allBankIds = data.banks.map((b) => b.bank_id);
    const allAssetClasses = Object.keys(ASSET_CLASS_MAPPING);
    const allCurrencies = (data.currencyList || []).map((c) => c.code);
    const resetFilters = {
      variantType: "default",
      bank_ids: allBankIds,
      asset_class: allAssetClasses,
      currency: allCurrencies,
    };
    setFilters(resetFilters);
    fetchReport(resetFilters);
  }, [data, setFilters, fetchReport]);

  if (loading) {
    return (
      <div className={`${REPORT_PAGE_CONTAINER_ALT} text-slate-900`}>
        <PageHeader
          title="Consolidated Holdings Report"
          description="Loading…"
          breadcrumbs={[...BREADCRUMBS.consolidated]}
        />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw
            className="h-10 w-10 animate-spin"
            style={{ color: REPORT_PRIMARY }}
          />
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={`${REPORT_PAGE_CONTAINER_ALT} text-slate-900`}>
        <PageHeader
          title="Consolidated Holdings Report"
          breadcrumbs={[...BREADCRUMBS.consolidated]}
        />
        <div className="py-10 text-center text-red-600">{error}</div>
      </div>
    );
  }

  if (!data) {
    return (
      <div className={`${REPORT_PAGE_CONTAINER_ALT} text-slate-900`}>
        <PageHeader
          title="Consolidated Holdings Report"
          breadcrumbs={[...BREADCRUMBS.consolidated]}
        />
        <div className="py-10 text-center text-slate-600">No data available</div>
      </div>
    );
  }

  return (
    <div className={`${REPORT_PAGE_CONTAINER} text-slate-900`}>
      <PageHeader
        title="Consolidated Holdings Report"
        description={`As of ${data.value_date} | ${data.first_name} ${data.last_name}`}
        breadcrumbs={[...BREADCRUMBS.consolidated]}
        actions={
          <ConsolidatedActions
            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}
        />
      )}

      <SummaryCards data={data} />

      <div className="mb-6 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm text-slate-900">
        <div className="border-b border-slate-200 bg-slate-50 px-6 py-4">
          <h2 className="text-lg font-semibold text-slate-900">Asset Class</h2>
        </div>
        <div className="p-6">
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <PieChartSection
              data={data}
              pieData={pieData}
              hiddenPieItems={hiddenPieItems}
              onTogglePieItem={togglePieItem}
            />
            <AssetClassTable
              data={data}
              assetClassSummary={assetClassSummary}
            />
          </div>
        </div>
      </div>

      <DetailedHoldingsTable
        data={data}
        expandedAssetClasses={expandedAssetClasses}
        expandedAssetTypes={expandedAssetTypes}
        onToggleAssetClass={toggleAssetClass}
        onToggleAssetType={toggleAssetType}
        onExpandAll={expandAllGlobal}
        onCollapseAll={collapseAllGlobal}
        onExpandAllForAssetClass={expandAllForAssetClass}
        onCollapseAllForAssetClass={collapseAllForAssetClass}
        isAllExpanded={isAllExpanded}
      />

      <SelectedBanksInfo data={data} />
    </div>
  );
}