"use client";

import React, { useState } from "react";
import { RefreshCw, Filter } 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";

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

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

  const getActiveFilterCount = () => {
    let count = 0;
    const totalBanks = banks?.length || 0;
    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="Structured Products Report" description="Loading…" />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  const renderContent = () => {
    if (showGraph && graphData && graphData.data) {
      return <GraphView graphData={graphData} />;
    }

    if (!data || data.length === 0) {
      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="container mx-auto px-4 py-6">
      <PageHeader
        title="Structured Products Report"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Reports" },
          { label: "Holdings" },
          { label: "Structured Products" },
        ]}
        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"
              }`}
            >
              <Filter className="h-4 w-4" />
              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-3.5 w-3.5 animate-spin" : "h-3.5 w-3.5"} />
              Refresh
            </button>
          </div>
        }
      />

      {/* Filters Panel */}
      {showFilters && (
        <ReportFilters
          filters={[
            {
              type: "search-multi-select",
              label: "Banks",
              placeholder: "All Banks",
              options: (banks || []).map((bank) => ({
                id: bank.bank_id,
                label: bank.bank_name,
                value: bank.bank_id,
              })),
              value: selectedBankIds,
              onChange: (value) => setSelectedBankIds(value),
            },
          ]}
          onApply={() => {
            fetchReport(selectedBankIds);
            setShowFilters(false);
          }}
          onReset={() => {
            const allBankIds = (banks || []).map((bank) => bank.bank_id);
            setSelectedBankIds(allBankIds);
            setShowFilters(false);
          }}
          loading={loading}
          showFilters={true}
          variant="panel"
          activeFilterCount={getActiveFilterCount()}
        />
      )}

      {/* Error Messages */}
      {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={fetchGraphData}
        graphLoading={graphLoading}
      />

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