"use client";

import { useState, useEffect, 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 { usePerformanceSummaryReport } from "@/hooks/usePerformanceSummaryReport";
import { PerformanceStatCards } from "@/components/reports/performancesummary/PerformanceStatCards";
import { AssetAllocationChart } from "@/components/reports/performancesummary/AssetAllocationChart";
import { PerformanceTimelineChart } from "@/components/reports/performancesummary/PerformanceTimelineChart";
import { PerformanceSummaryTable } from "@/components/reports/performancesummary/PerformanceSummaryTable";
import { AssetAllocationTable } from "@/components/reports/performancesummary/AssetAllocationTable";
import {
  calculateStatCards,
  calculateAssetAllocation,
  calculatePieSlices,
} from "@/utils/performance-summary-utils";
import { PerformanceSummaryReportActions } from "@/components/reports/performancesummary/PerformanceSummaryReportActions";
import { usePerformanceSummaryFilters } from "@/components/reports/performancesummary/usePerformanceSummaryFilters";
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 (id: string) => {
    setter((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
}

export default function PerformanceSummaryReport() {
  const {
    data,
    loading,
    error,
    filters,
    setFilters,
    fetchReport,
    getActiveFilterCount,
    resetFilters: getResetFilters,
  } = usePerformanceSummaryReport();

  const [visibleSeries, setVisibleSeries] = useState<Set<string>>(
    new Set(["ALL"])
  );
  const [visiblePieAssets, setVisiblePieAssets] = useState<Set<string>>(
    new Set()
  );
  const [showFilters, setShowFilters] = useState(false);

  const statCards = useMemo(() => calculateStatCards(data), [data]);
  const assetAllocation = useMemo(
    () => calculateAssetAllocation(data),
    [data]
  );
  const pieSlices = useMemo(
    () => calculatePieSlices(assetAllocation, visiblePieAssets),
    [assetAllocation, visiblePieAssets]
  );

  useEffect(() => {
    if (assetAllocation.length > 0 && visiblePieAssets.size === 0) {
      setVisiblePieAssets(new Set(assetAllocation.map((a) => a.id)));
    }
  }, [assetAllocation, visiblePieAssets.size]);

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

  const toggleSeries = useCallback(toggleInSet(setVisibleSeries), []);
  const togglePieAsset = useCallback(toggleInSet(setVisiblePieAssets), []);

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

  const handleApplyFilters = useCallback(async () => {
    try {
      await fetchReport(filters);
      setShowFilters(false);
    } catch (err) {
      console.error("Failed to apply filters:", err);
    }
  }, [fetchReport, filters]);

  const handleResetFilters = useCallback(() => {
    const resetFilters = getResetFilters();
    setFilters(resetFilters);
    fetchReport(resetFilters);
    setShowFilters(false);
  }, [getResetFilters, setFilters, fetchReport]);

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

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Performance Summary Report"
        breadcrumbs={[...BREADCRUMBS.performanceSummary]}
        actions={
          <PerformanceSummaryReportActions
            isLoading={loading}
            onRefresh={handleRefresh}
            onToggleFilters={handleToggleFilters}
            showFilters={showFilters}
            activeFilterCount={getActiveFilterCount()}
          />
        }
      />

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

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

      <PerformanceStatCards stats={statCards} />

      <div className="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3">
        <AssetAllocationChart
          assetAllocation={assetAllocation}
          pieSlices={pieSlices}
          visiblePieAssets={visiblePieAssets}
          onToggleAsset={togglePieAsset}
        />
        <PerformanceTimelineChart
          data={data}
          visibleSeries={visibleSeries}
          onToggleSeries={toggleSeries}
        />
      </div>

      <PerformanceSummaryTable data={data} />

      <AssetAllocationTable
        assetAllocation={assetAllocation}
        pieSlices={pieSlices}
        totalValue={data?.end_value ?? 0}
      />
    </div>
  );
}