"use client";

import { useState, useEffect, 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 { 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 {
  ASSET_CLASS_MAPPING,
  calculateStatCards,
  calculateAssetAllocation,
  calculatePieSlices,
} from "@/utils/performance-summary-utils";

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);

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

  // Auto-select all pie assets on initial load
  useEffect(() => {
    if (assetAllocation.length > 0 && visiblePieAssets.size === 0) {
      setVisiblePieAssets(new Set(assetAllocation.map((asset) => asset.id)));
    }
  }, [assetAllocation.length, visiblePieAssets.size]);

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

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

  const handleResetFilters = () => {
    const resetFilters = getResetFilters();
    setFilters(resetFilters);
    fetchReport(resetFilters);
    setShowFilters(false);
  };

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader title="Performance Summary Report" description="Loading…" />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-10">
      <PageHeader
        title="Performance Summary Report"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Reports" },
          { label: "Performance" },
          { label: "Performance Summary" },
        ]}
        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"
              }`}
            >
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              Filters {getActiveFilterCount() > 0 && `(${getActiveFilterCount()})`}
            </button>
            <button
              onClick={() => fetchReport(filters)}
              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-4 w-4 animate-spin" : "h-4 w-4"}
              />
              Refresh
            </button>
          </div>
        }
      />

      {/* Filters Panel */}
      {showFilters && data && (
        <ReportFilters
          filters={[
            {
              type: "select",
              label: "Variant Type",
              placeholder: "Select variant type",
              options: [
                { id: "default", label: "Default", value: "default" },
                { id: "macro", label: "Macro", value: "macro" },
                { id: "bridge", label: "Bridge", value: "bridge" },
              ],
              value: filters.variantType,
              onChange: (value) => setFilters({ ...filters, variantType: value }),
            },
            {
              type: "search-multi-select",
              label: `Banks (${(data.banks || []).length})`,
              placeholder: "All Banks",
              options: (data.banks || []).map((bank) => ({
                id: bank.bank_id,
                label: bank.bank_name,
                value: bank.bank_id,
              })),
              value: filters.bank_ids,
              onChange: (value) => setFilters({ ...filters, bank_ids: value }),
            },
            {
              type: "search-multi-select",
              label: `Asset Class (${Object.keys(ASSET_CLASS_MAPPING).length})`,
              placeholder: "All Asset Classes",
              options: Object.keys(ASSET_CLASS_MAPPING).map((displayName) => ({
                id: displayName,
                label: displayName,
                value: displayName,
              })),
              value: filters.asset_class,
              onChange: (value) => setFilters({ ...filters, asset_class: value }),
            },
            {
              type: "search-multi-select",
              label: `Currency (${(data.currencyList || []).length})`,
              placeholder: "All Currencies",
              options: (data.currencyList || []).map((currency) => ({
                id: currency.currency_id,
                label: currency.code,
                value: currency.code,
              })),
              value: filters.currency,
              onChange: (value) => setFilters({ ...filters, currency: value }),
            },
          ]}
          onApply={handleApplyFilters}
          onReset={handleResetFilters}
          loading={loading}
          showFilters={true}
          variant="panel"
          activeFilterCount={getActiveFilterCount()}
        />
      )}

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

      {/* Stat Cards */}
      <PerformanceStatCards stats={statCards} />

      {/* Charts Section */}
      <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>
  );
}