"use client";

import { useState, useMemo, useCallback } 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 { useAssetAnalyticsReport } from "@/hooks/useAssetAnalyticsReport";
import { MetricsGrid } from "@/components/reports/assetanalytics/MetricsGrid";
import { FeesSection } from "@/components/reports/assetanalytics/FeesSection";
import { RecentTransactionsTable } from "@/components/reports/assetanalytics/RecentTransactionsTable";
import { TradingViewChart } from "@/components/reports/assetanalytics/TradingViewChart";
import { AssetAnalyticsActions } from "@/components/reports/assetanalytics/AssetAnalyticsActions";
import { useAssetAnalyticsFilters } from "@/components/reports/assetanalytics/useAssetAnalyticsFilters";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import {
  REPORT_PAGE_CONTAINER,
  REPORT_PAGE_CONTAINER_ALT,
  REPORT_PRIMARY,
  REPORT_PRIMARY_HOVER,
} from "@/app/reports/constants";

type TabId = "overview" | "chart";

export default function AssetAnalyticsReport() {
  const {
    data,
    loading,
    error,
    selectedTicker,
    setSelectedTicker,
    selectedAssetClasses,
    setSelectedAssetClasses,
    selectedBanks,
    setSelectedBanks,
    fetchReport,
  } = useAssetAnalyticsReport();

  const [showFilters, setShowFilters] = useState(false);
  const [activeTab, setActiveTab] = useState<TabId>("overview");

  const { filterConfig } = useAssetAnalyticsFilters({
    data,
    selectedTicker,
    setSelectedTicker,
    selectedAssetClasses,
    setSelectedAssetClasses,
    selectedBanks,
    setSelectedBanks,
  });

  const handleApplyFilters = useCallback(() => {
    fetchReport(selectedTicker, selectedAssetClasses, selectedBanks);
    setShowFilters(false);
  }, [fetchReport, selectedTicker, selectedAssetClasses, selectedBanks]);

  const handleResetFilters = useCallback(() => {
    setSelectedTicker("");
    const allAssetClassIds = data?.asset_classes
      ? Object.keys(data.asset_classes)
      : [];
    const allBankIds = data?.available_banks
      ? Object.keys(data.available_banks)
      : [];
    setSelectedAssetClasses(allAssetClassIds);
    setSelectedBanks(allBankIds);
    fetchReport("", allAssetClassIds, allBankIds);
  }, [
    data,
    setSelectedTicker,
    setSelectedAssetClasses,
    setSelectedBanks,
    fetchReport,
  ]);

  const chartSymbol = useMemo(() => {
    if (!data?.detailed_analytics?.length) return "AAPL";
    return data.detailed_analytics[0].ticker || "AAPL";
  }, [data]);

  const activeFilterCount = useMemo(() => {
    let count = 0;
    if (selectedTicker && selectedTicker !== "") count++;
    const totalAssetClasses = data?.asset_classes
      ? Object.keys(data.asset_classes).length
      : 0;
    if (
      totalAssetClasses > 0 &&
      selectedAssetClasses.length > 0 &&
      selectedAssetClasses.length < totalAssetClasses
    )
      count++;
    const totalBanks = data?.available_banks
      ? Object.keys(data.available_banks).length
      : 0;
    if (
      totalBanks > 0 &&
      selectedBanks.length > 0 &&
      selectedBanks.length < totalBanks
    )
      count++;
    return count;
  }, [selectedTicker, selectedAssetClasses, selectedBanks, data]);

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

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

  if (error) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Asset Analytics Report"
          description="Failed to load data"
          breadcrumbs={[...BREADCRUMBS.assetAnalytics]}
        />
        <div className="mt-6">
          <ErrorMessage error={error} />
        </div>
        <div className="flex h-64 items-center justify-center">
          <button
            type="button"
            onClick={handleRefresh}
            className="rounded-lg px-6 py-3 font-medium text-white transition-colors"
            style={{ backgroundColor: REPORT_PRIMARY }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = REPORT_PRIMARY_HOVER;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = REPORT_PRIMARY;
            }}
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  const hasData =
    data?.detailed_analytics && data.detailed_analytics.length > 0;

  if (!hasData) {
    return (
      <div className={REPORT_PAGE_CONTAINER_ALT}>
        <PageHeader
          title="Asset Analytics Report"
          description="No data available"
          breadcrumbs={[...BREADCRUMBS.assetAnalytics]}
          actions={
            <AssetAnalyticsActions
              isLoading={loading}
              onRefresh={handleRefresh}
              onToggleFilters={handleToggleFilters}
              showFilters={showFilters}
              activeFilterCount={activeFilterCount}
            />
          }
        />

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

        <div className="mt-6 rounded-lg border border-slate-200 bg-slate-50 py-12 text-center">
          <p className="text-slate-600">
            No asset analytics data available for the selected filters.
          </p>
          <p className="mt-2 text-sm text-slate-500">
            Try adjusting your filters or selecting different options.
          </p>
        </div>
      </div>
    );
  }

  const asset = data!.detailed_analytics[0];

  const tabButtons: { id: TabId; label: string }[] = [
    { id: "overview", label: "Overview" },
    { id: "chart", label: "Live Chart and Data" },
  ];

  return (
    <div className={REPORT_PAGE_CONTAINER}>
      <PageHeader
        title="Asset Analytics Report"
        breadcrumbs={[...BREADCRUMBS.assetAnalytics]}
        actions={
          <AssetAnalyticsActions
            isLoading={loading}
            onRefresh={handleRefresh}
            onToggleFilters={handleToggleFilters}
            showFilters={showFilters}
            activeFilterCount={activeFilterCount}
          />
        }
      />

      <div className="mb-6">
        <h2
          className="mb-2 text-2xl font-bold"
          style={{ color: REPORT_PRIMARY }}
        >
          {asset.ticker_name}
        </h2>
        <span
          className="inline-block rounded-lg border px-3 py-1 text-sm font-medium"
          style={{
            backgroundColor: `${REPORT_PRIMARY}1A`,
            borderColor: `${REPORT_PRIMARY}4D`,
            color: REPORT_PRIMARY,
          }}
        >
          {data!.asset_classes[asset.asset_class] || asset.asset_class}
        </span>
      </div>

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

      <div className="mb-6 border-b border-slate-200">
        <div className="flex gap-4">
          {tabButtons.map(({ id, label }) => (
            <button
              key={id}
              type="button"
              onClick={() => setActiveTab(id)}
              className={`relative px-4 py-3 text-sm font-semibold transition-colors ${
                activeTab === id
                  ? "border-b-2"
                  : "text-slate-600 hover:text-slate-900"
              }`}
              style={
                activeTab === id
                  ? { color: REPORT_PRIMARY, borderBottomColor: REPORT_PRIMARY }
                  : undefined
              }
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      {activeTab === "overview" && (
        <div>
          <MetricsGrid asset={asset} />
          <FeesSection asset={asset} />
          {asset.recent_transactions && (
            <RecentTransactionsTable recentTrans={asset.recent_transactions} />
          )}
        </div>
      )}

      {activeTab === "chart" && (
        <TradingViewChart symbol={chartSymbol} />
      )}
    </div>
  );
}