import { useMemo, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useTickerDetail } from '../hooks/useTickerDetail';
import { useFetchSymbolData } from '../hooks/useFetchSymbolData';
import { CandlestickChart } from '../components/charts/CandlestickChart';
import { ScoreCard } from '../components/ui/ScoreCard';
import { SkeletonCard } from '../components/ui/Skeleton';
import { SentimentPanel } from '../components/ticker/SentimentPanel';
import { FundamentalsPanel } from '../components/ticker/FundamentalsPanel';
import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
import { RecommendationPanel } from '../components/ticker/RecommendationPanel';
import { Button } from '../components/ui/Button';
import { Callout } from '../components/ui/Callout';
import { Section } from '../components/ui/Section';
import { Tabs } from '../components/ui/Tabs';
import { formatPrice } from '../lib/format';
import type { TradeSetup } from '../lib/types';

const detailTabs = ['Analysis', 'Indicators', 'S/R Levels'] as const;
type DetailTab = (typeof detailTabs)[number];

function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
  return (
    <Callout variant="error" onRetry={onRetry}>
      {message}
    </Callout>
  );
}

function timeAgo(iso: string): string {
  const diff = Date.now() - new Date(iso).getTime();
  const mins = Math.floor(diff / 60_000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  const days = Math.floor(hrs / 24);
  return `${days}d ago`;
}

interface DataStatusItem {
  label: string;
  available: boolean;
  timestamp?: string | null;
}

function DataFreshnessBar({ items }: { items: DataStatusItem[] }) {
  return (
    <div className="glass-sm p-3 flex flex-wrap gap-4">
      {items.map((item) => (
        <div key={item.label} className="flex items-center gap-2">
          <span className={`inline-block h-2 w-2 rounded-full shrink-0 ${
            item.available ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40' : 'bg-gray-600'
          }`} />
          <span className="text-xs text-gray-400">{item.label}</span>
          {item.available && item.timestamp && (
            <span className="text-[10px] text-gray-500">{timeAgo(item.timestamp)}</span>
          )}
          {!item.available && (
            <span className="text-[10px] text-gray-600">no data</span>
          )}
        </div>
      ))}
    </div>
  );
}

export default function TickerDetailPage() {
  const { symbol = '' } = useParams<{ symbol: string }>();
  const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
  const ingestion = useFetchSymbolData();
  const [activeTab, setActiveTab] = useState<DetailTab>('Analysis');

  const dataStatus: DataStatusItem[] = useMemo(() => [
    {
      label: 'OHLCV',
      available: !!ohlcv.data && ohlcv.data.length > 0,
      timestamp: ohlcv.data?.[ohlcv.data.length - 1]?.created_at,
    },
    {
      label: 'Sentiment',
      available: !!sentiment.data && sentiment.data.count > 0,
      timestamp: sentiment.data?.scores?.[0]?.timestamp,
    },
    {
      label: 'Fundamentals',
      available: !!fundamentals.data && fundamentals.data.fetched_at !== null,
      timestamp: fundamentals.data?.fetched_at,
    },
    {
      label: 'S/R Levels',
      available: !!srLevels.data && srLevels.data.count > 0,
      timestamp: srLevels.data?.levels?.[0]?.created_at,
    },
    {
      label: 'Scores',
      available: !!scores.data && scores.data.composite_score !== null,
      timestamp: scores.data?.computed_at,
    },
  ], [ohlcv.data, sentiment.data, fundamentals.data, srLevels.data, scores.data]);

  // Log trades API errors but don't disrupt the page
  useEffect(() => {
    if (trades.error) {
      console.error('Failed to fetch trade setups:', trades.error);
    }
  }, [trades.error]);

  const setupsForSymbol: TradeSetup[] = useMemo(() => {
    if (trades.error || !trades.data) return [];
    return trades.data.filter((t) => t.symbol.toUpperCase() === symbol.toUpperCase());
  }, [trades.data, trades.error, symbol]);

  const longSetup = useMemo(
    () => setupsForSymbol?.find((s) => s.direction === 'long'),
    [setupsForSymbol],
  );

  const shortSetup = useMemo(
    () => setupsForSymbol?.find((s) => s.direction === 'short'),
    [setupsForSymbol],
  );

  // Use the highest-confidence setup for chart overlay fallback.
  const tradeSetup: TradeSetup | undefined = useMemo(() => {
    const candidates = [longSetup, shortSetup].filter(Boolean) as TradeSetup[];
    if (candidates.length === 0) return undefined;
    return candidates.sort((a, b) => (b.confidence_score ?? 0) - (a.confidence_score ?? 0))[0];
  }, [longSetup, shortSetup]);

  // Sort visible S/R levels by strength for the table (only levels within chart zones)
  const sortedLevels = useMemo(() => {
    if (!srLevels.data?.visible_levels) return [];
    return [...srLevels.data.visible_levels].sort((a, b) => b.strength - a.strength);
  }, [srLevels.data]);

  return (
    <div className="space-y-6 animate-slide-up">
      {/* Header */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-semibold text-gray-100">{symbol.toUpperCase()}</h1>
          <p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
        </div>
        <Button onClick={() => ingestion.mutate(symbol)} loading={ingestion.isPending}>
          {ingestion.isPending ? 'Fetching…' : 'Fetch Data'}
        </Button>
      </div>

      {/* Data freshness bar */}
      <DataFreshnessBar items={dataStatus} />

      <RecommendationPanel symbol={symbol} longSetup={longSetup} shortSetup={shortSetup} />

      {/* Chart — always visible */}
      <Section title="Price Chart">
        {ohlcv.isLoading && <SkeletonCard className="h-[400px]" />}
        {ohlcv.isError && (
          <SectionError
            message={ohlcv.error instanceof Error ? ohlcv.error.message : 'Failed to load OHLCV data'}
            onRetry={() => ohlcv.refetch()}
          />
        )}
        {ohlcv.data && (
          <div className="glass p-5">
            <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
            {srLevels.isError && (
              <p className="mt-2 text-xs text-amber-500/80">S/R levels unavailable — chart shown without overlays</p>
            )}
          </div>
        )}
      </Section>

      {/* Detail tabs */}
      <Tabs tabs={detailTabs} active={activeTab} onChange={setActiveTab} />

      {activeTab === 'Analysis' && (
        <div className="grid gap-6 lg:grid-cols-3 animate-fade-in">
          <Section title="Scores">
            {scores.isLoading && <SkeletonCard />}
            {scores.isError && (
              <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
            )}
            {scores.data && (
              <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
            )}
          </Section>

          <Section title="Sentiment">
            {sentiment.isLoading && <SkeletonCard />}
            {sentiment.isError && (
              <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
            )}
            {sentiment.data && <SentimentPanel data={sentiment.data} />}
          </Section>

          <Section title="Fundamentals">
            {fundamentals.isLoading && <SkeletonCard />}
            {fundamentals.isError && (
              <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
            )}
            {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
          </Section>
        </div>
      )}

      {activeTab === 'Indicators' && (
        <div className="animate-fade-in">
          <Section title="Technical Indicators">
            <IndicatorSelector symbol={symbol} />
          </Section>
        </div>
      )}

      {activeTab === 'S/R Levels' && (
        <div className="animate-fade-in">
          <Section title="Support & Resistance Levels" hint="sorted by strength">
            {sortedLevels.length === 0 ? (
              <Callout variant="empty">No S/R levels detected for this ticker yet.</Callout>
            ) : (
              <div className="glass overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
                      <th className="px-4 py-3">Type</th>
                      <th className="px-4 py-3">Price Level</th>
                      <th className="px-4 py-3">Strength</th>
                      <th className="px-4 py-3">Method</th>
                    </tr>
                  </thead>
                  <tbody>
                    {sortedLevels.map((level) => (
                      <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
                        <td className="px-4 py-3">
                          <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
                        </td>
                        <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
                        <td className="px-4 py-3 text-gray-200">{level.strength}</td>
                        <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </Section>
        </div>
      )}
    </div>
  );
}