"use client";

import { useState, useCallback, 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 { useStructuredProductsReport } from "@/hooks/useStructuredProductsReport";
import { GraphView } from "@/components/reports/structuredproducts/GraphView";
import { ReportTableView } from "@/components/reports/structuredproducts/ReportTableView";
import { TabNavigation } from "@/components/reports/structuredproducts/TabNavigation";
import { StructuredProductsActions } from "@/components/reports/structuredproducts/StructuredProductsActions";
import { useStructuredProductsFilters } from "@/components/reports/structuredproducts/useStructuredProductsFilters";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
} from "@/app/reports/constants";

export default function StructuredProductsReport() {
  const {
    data,
    loading,
    error,
    banks,
    selectedBankIds,
    setSelectedBankIds,
    showGraph,
    setShowGraph,
    graphData,
    graphLoading,
    graphError,
    pdfError,
    fetchReport,
    fetchGraphData,
  } = useStructuredProductsReport();

  const [showFilters, setShowFilters] = useState(false);

  const { filterConfig } = useStructuredProductsFilters({
    banks,
    selectedBankIds,
    setSelectedBankIds,
  });

  const activeFilterCount = useMemo(() => {
    const totalBanks = banks?.length ?? 0;
    if (
      totalBanks > 0 &&
      selectedBankIds.length > 0 &&
      selectedBankIds.length < totalBanks
    )
      return 1;
    return 0;
  }, [banks?.length, selectedBankIds.length]);

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

  const handleResetFilters = useCallback(() => {
    const allBankIds = (banks ?? []).map((b) => b.bank_id);
    setSelectedBankIds(allBankIds);
    setShowFilters(false);
  }, [banks, setSelectedBankIds]);

  const handleShowGraph = useCallback(() => {
    setShowFilters(false);
    fetchGraphData();
  }, [fetchGraphData]);

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

  const hasTableData = data && data.length > 0;
  const showGraphContent = showGraph && graphData?.data;

  const renderContent = () => {
    if (showGraphContent) {
      return <GraphView graphData={graphData!} />;
    }
    if (!hasTableData) {
      return (
        <div className="mt-6 rounded-lg border border-slate-200 bg-white p-8 text-center">
          <p className="text-slate-500">No data available</p>
        </div>
      );
    }
    return <ReportTableView data={data!} />;
  };

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Structured Products Report"
        breadcrumbs={[...BREADCRUMBS.structuredProducts]}
        actions={
          !showGraph && (
            <StructuredProductsActions
              isLoading={loading}
              onRefresh={handleRefresh}
              onToggleFilters={handleToggleFilters}
              showFilters={showFilters}
              activeFilterCount={activeFilterCount}
            />
          )
        }
      />

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

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

      <TabNavigation
        showGraph={showGraph}
        onShowReport={() => setShowGraph(false)}
        onShowGraph={handleShowGraph}
        graphLoading={graphLoading}
      />

      {renderContent()}
    </div>
  );
}