"use client";

import { useState } from "react";
import { RefreshCw, X, Filter } from "lucide-react";
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, TABS } from "@/types/portfolio-analytics";

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 toggleSeries = (seriesId: string) => {
    setVisibleSeries((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(seriesId)) newSet.delete(seriesId);
      else newSet.add(seriesId);
      return newSet;
    });
  };

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

  const handleClearFilters = () => {
    const cleared = getResetFilters();
    setFilters(cleared);
    fetchReport(cleared);
    setShowFilterPanel(false);
  };

  if (loading && !data) {
    return (
      <div className="container mx-auto px-4 py-10">
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-6">
        {/* Header */}
        <div className="mb-6 flex items-center justify-between bg-white px-6 py-4 rounded-lg shadow-sm">
          <h1 className="text-2xl font-bold text-slate-900">Portfolio Analytics Report</h1>
          <div className="flex items-center gap-2">
            <button
              onClick={() => setShowFilterPanel(!showFilterPanel)}
              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 ${
                showFilterPanel
                  ? "border-[#428B4D] bg-[#428B4D] text-white"
                  : "border-[#428B4D]/40 bg-white text-slate-700 hover:bg-[#428B4D] hover:text-white"
              }`}
            >
              <Filter size={16} />
              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"
            >
              <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
              Refresh
            </button>
            <button className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50">
              <X size={20} />
            </button>
          </div>
        </div>

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

        {/* Filter Panel */}
        {showFilterPanel && data && (
          <ReportFilters
            filters={[
              {
                type: "text",
                label: "From Date",
                placeholder: "DD-MM-YYYY",
                value: filters.from_date || "",
                onChange: (value) => setFilters({ ...filters, from_date: value || null }),
              },
              {
                type: "text",
                label: "To Date",
                placeholder: "DD-MM-YYYY",
                value: filters.to_date || "",
                onChange: (value) => setFilters({ ...filters, to_date: value || null }),
              },
              {
                type: "search-multi-select",
                label: "Banks",
                placeholder: "All Banks",
                options: Object.entries(data.data?.filterOptions?.banks || {}).map(([id, name]) => ({
                  id,
                  label: name,
                  value: id,
                })),
                value: filters.bank_id,
                onChange: (value) => setFilters({ ...filters, bank_id: value }),
              },
              {
                type: "search-multi-select",
                label: "Asset Class Type",
                placeholder: "All Types",
                options: Object.entries(data.data?.filterOptions?.modules || {}).map(([code, name]) => ({
                  id: code,
                  label: name,
                  value: code,
                })),
                value: filters.f_type,
                onChange: (value) => setFilters({ ...filters, f_type: value }),
              },
              {
                type: "search-multi-select",
                label: "Industry",
                placeholder: "All Industries",
                options: Object.entries(data.data?.filterOptions?.industries || {}).map(([key, name]) => ({
                  id: key,
                  label: name,
                  value: key,
                })),
                value: filters.Industry,
                onChange: (value) => setFilters({ ...filters, Industry: value }),
              },
              {
                type: "search-multi-select",
                label: "Sector",
                placeholder: "All Sectors",
                options: Object.entries(data.data?.filterOptions?.sectors || {}).map(([key, name]) => ({
                  id: key,
                  label: name,
                  value: key,
                })),
                value: filters.Sector,
                onChange: (value) => setFilters({ ...filters, Sector: value }),
              },
              {
                type: "search-multi-select",
                label: "Market Price Currency",
                placeholder: "All Currencies",
                options: Object.entries(data.data?.filterOptions?.currencies || {}).map(([key, name]) => ({
                  id: key,
                  label: name,
                  value: key,
                })),
                value: filters.MarketPriceCurrency,
                onChange: (value) => setFilters({ ...filters, MarketPriceCurrency: value }),
              },
              {
                type: "search-multi-select",
                label: "Geography",
                placeholder: "All Countries",
                options: Object.entries(data.data?.filterOptions?.countries || {}).map(([key, name]) => ({
                  id: key,
                  label: name,
                  value: key,
                })),
                value: filters.Country,
                onChange: (value) => setFilters({ ...filters, Country: value }),
              },
            ]}
            onApply={handleApplyFilters}
            onReset={handleClearFilters}
            loading={loading}
            showFilters={true}
            variant="panel"
            activeFilterCount={getActiveFilterCount()}
          />
        )}

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

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