"use client";

import { useState, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ReportFilters } from "@/components/ui/ReportFilters";
import { usePortfolioAnalyticsReport } from "@/hooks/usePortfolioAnalyticsReport";
import { TabNavigation } from "@/components/reports/portfolio/TabNavigation";
import { PortfolioChart } from "@/components/reports/portfolio/PortfolioChart";
import { PortfolioTable } from "@/components/reports/portfolio/PortfolioTable";
import { TabName } from "@/types/portfolio-analytics";
import { PortfolioReportActions } from "@/components/reports/portfolio/PortfolioReportActions";
import { usePortfolioFilters } from "@/components/reports/portfolio/usePortfolioFilters";
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 PortfolioAnalyticsReport() {
  const {
    data,
    loading,
    tableData,
    filters,
    setFilters,
    fetchReport,
    getActiveFilterCount,
    resetFilters: getResetFilters,
  } = usePortfolioAnalyticsReport();

  const [activeTab, setActiveTab] = useState<TabName>("Graph");
  const [visibleSeries, setVisibleSeries] = useState<Set<string>>(
    new Set(["ALL"])
  );
  const [showFilterPanel, setShowFilterPanel] = useState(false);

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

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

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

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

  const handleClearFilters = useCallback(() => {
    const cleared = getResetFilters();
    setFilters(cleared);
    fetchReport(cleared);
    setShowFilterPanel(false);
  }, [getResetFilters, setFilters, fetchReport]);

  if (loading && !data) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Portfolio Analytics Report"
          description="Loading…"
          breadcrumbs={[...BREADCRUMBS.portfolioAnalytics]}
        />
        <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="min-h-screen bg-gray-50">
      <div className={REPORT_PAGE_CONTAINER}>
        <PageHeader
          title="Portfolio Analytics Report"
          breadcrumbs={[...BREADCRUMBS.portfolioAnalytics]}
          actions={
            <PortfolioReportActions
              isLoading={loading}
              onRefresh={handleRefresh}
              onToggleFilters={handleToggleFilters}
              showFilters={showFilterPanel}
              activeFilterCount={getActiveFilterCount()}
            />
          }
        />

        <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />

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

        {activeTab === "Graph" && data?.data?.lineChartData && (
          <PortfolioChart
            series={data.data.lineChartData.series}
            dateList={data.data.lineChartData.dateList}
            visibleSeries={visibleSeries}
            onToggleSeries={toggleSeries}
          />
        )}

        <PortfolioTable data={tableData} filters={filters} />
      </div>
    </div>
  );
}