"use client";

import { useState } 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";

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<"overview" | "chart">("overview");

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

  const handleResetFilters = () => {
    setSelectedTicker("");
    // Reset to all asset classes and banks selected
    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);
  };

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

  const getActiveFilterCount = () => {
    let count = 0;
    // Only count ticker if it's selected
    if (selectedTicker && selectedTicker !== "") count++;
    // Only count asset classes if user has selected specific ones (not all)
    const totalAssetClasses = data?.asset_classes ? Object.keys(data.asset_classes).length : 0;
    if (totalAssetClasses > 0 && selectedAssetClasses.length > 0 && selectedAssetClasses.length < totalAssetClasses) {
      count++;
    }
    // Only count banks if user has selected specific ones (not all)
    const totalBanks = data?.available_banks ? Object.keys(data.available_banks).length : 0;
    if (totalBanks > 0 && selectedBanks.length > 0 && selectedBanks.length < totalBanks) {
      count++;
    }
    return count;
  };

  const tickerOptions = data
    ? Object.entries(data.available_tickers).map(([value, label]) => ({
        value,
        label,
      }))
    : [];

  const assetClassOptions = data
    ? Object.entries(data.asset_classes).map(([value, label]) => ({
        value,
        label,
      }))
    : [];

  const bankOptions = data
    ? Object.entries(data.available_banks).map(([value, label]) => ({
        value,
        label,
      }))
    : [];

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

  if (error) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader
          title="Asset Analytics Report"
          description="Failed to load data"
          breadcrumbs={[
            { label: "Home", href: "/" },
            { label: "Reports" },
            { label: "Holdings" },
            { label: "Asset Analytics" },
          ]}
        />
        <div className="mt-6">
          <ErrorMessage error={error} />
        </div>
        <div className="flex h-64 items-center justify-center">
          <button
            onClick={() => fetchReport()}
            className="px-6 py-3 bg-[#428B4D] text-white rounded-lg hover:bg-[#357a3f] transition-colors font-medium"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!data || !data.detailed_analytics || data.detailed_analytics.length === 0) {
    return (
      <div className="container mx-auto px-4 py-10">
        <PageHeader
          title="Asset Analytics Report"
          description="No data available"
          breadcrumbs={[
            { label: "Home", href: "/" },
            { label: "Reports" },
            { label: "Holdings" },
            { label: "Asset Analytics" },
          ]}
          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()}
                disabled={loading}
                className="inline-flex items-center gap-2 rounded-lg border border-[#428B4D]/40 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-[#428B4D] hover:text-white transition-all duration-200 disabled:opacity-50"
              >
                <RefreshCw className={loading ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
                {loading ? "Refreshing…" : "Refresh"}
              </button>
            </div>
          }
        />

        {/* Filters Section */}
        {showFilters && data && (
          <ReportFilters
            filters={[
              {
                type: "select",
                label: `Ticker (${Object.keys(data?.available_tickers || {}).length})`,
                placeholder: "All Tickers",
                options: tickerOptions.map((option) => ({
                  id: option.value,
                  label: option.label,
                  value: option.value,
                })),
                value: selectedTicker,
                onChange: (value) => setSelectedTicker(value),
              },
              {
                type: "search-multi-select",
                label: `Asset Class (${Object.keys(data?.asset_classes || {}).length})`,
                placeholder: "All Asset Classes",
                options: assetClassOptions.map((option) => ({
                  id: option.value,
                  label: option.label,
                  value: option.value,
                })),
                value: selectedAssetClasses,
                onChange: (value) => setSelectedAssetClasses(value),
              },
              {
                type: "search-multi-select",
                label: `Banks (${Object.keys(data?.available_banks || {}).length})`,
                placeholder: "All Banks",
                options: bankOptions.map((option) => ({
                  id: option.value,
                  label: option.label,
                  value: option.value,
                })),
                value: selectedBanks,
                onChange: (value) => setSelectedBanks(value),
              },
            ]}
            onApply={handleApplyFilters}
            onReset={handleResetFilters}
            loading={loading}
            showFilters={true}
            variant="panel"
            activeFilterCount={getActiveFilterCount()}
          />
        )}

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

  const asset = data.detailed_analytics[0];

  return (
    <div className="container mx-auto px-4 py-6">
      {/* Header Section */}
      <PageHeader
        title="Asset Analytics Report"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Reports" },
          { label: "Holdings" },
          { label: "Asset Analytics" },
        ]}
        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()}
              disabled={loading}
              className="inline-flex items-center gap-2 rounded-lg border border-[#428B4D]/40 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-[#428B4D] hover:text-white transition-all duration-200 disabled:opacity-50"
            >
              <RefreshCw className={loading ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
              {loading ? "Refreshing…" : "Refresh"}
            </button>
          </div>
        }
      />

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

      {/* Asset Title Section */}
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-[#428B4D] mb-2">
          {asset.ticker_name}
        </h2>
        <div className="inline-block">
          <span className="inline-block px-3 py-1 rounded-lg bg-[#428B4D]/10 text-[#428B4D] text-sm font-medium border border-[#428B4D]/30">
            {data.asset_classes[asset.asset_class] || asset.asset_class}
          </span>
        </div>
      </div>

      {/* Filters Section */}
      {showFilters && (
        <ReportFilters
          filters={[
            {
              type: "select",
            label: `Ticker (${Object.keys(data?.available_tickers || {}).length})`,
            placeholder: "All Tickers",
            options: tickerOptions.map((option) => ({
              id: option.value,
              label: option.label,
              value: option.value,
            })),
              value: selectedTicker,
              onChange: (value) => setSelectedTicker(value),
            },
            {
              type: "search-multi-select",
            label: `Asset Class (${Object.keys(data?.asset_classes || {}).length})`,
            placeholder: "All Asset Classes",
            options: assetClassOptions.map((option) => ({
              id: option.value,
              label: option.label,
              value: option.value,
            })),
            value: selectedAssetClasses,
            onChange: (value) => setSelectedAssetClasses(value),
          },
          {
            type: "search-multi-select",
            label: `Banks (${Object.keys(data?.available_banks || {}).length})`,
            placeholder: "All Banks",
            options: bankOptions.map((option) => ({
              id: option.value,
              label: option.label,
              value: option.value,
            })),
            value: selectedBanks,
            onChange: (value) => setSelectedBanks(value),
          },
        ]}
          onApply={handleApplyFilters}
          onReset={handleResetFilters}
          loading={loading}
          showFilters={true}
          variant="panel"
          activeFilterCount={getActiveFilterCount()}
        />
      )}

      {/* Tabs Navigation */}
      <div className="mb-6 border-b border-slate-200">
        <div className="flex gap-4">
          <button
            onClick={() => setActiveTab("overview")}
            className={`px-4 py-3 text-sm font-semibold transition-colors relative ${
              activeTab === "overview"
                ? "text-[#428B4D] border-b-2 border-[#428B4D]"
                : "text-slate-600 hover:text-slate-900"
            }`}
          >
            Overview
          </button>
          <button
            onClick={() => setActiveTab("chart")}
            className={`px-4 py-3 text-sm font-semibold transition-colors relative ${
              activeTab === "chart"
                ? "text-[#428B4D] border-b-2 border-[#428B4D]"
                : "text-slate-600 hover:text-slate-900"
            }`}
          >
            Live Chart and Data
          </button>
        </div>
      </div>

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

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