import { useState, useEffect } from 'react'
import { useMacroRegime, useAiStatus } from '../hooks/useApi'
import { RefreshCw, Activity, ChevronDown, ChevronUp, Brain } from 'lucide-react'
import clsx from 'clsx'
import axios from 'axios'

const api = axios.create({ baseURL: '/api' })

interface MacroGauge {
  id: string; label: string; ticker?: string | null
  value: number | null; change_pct: number | null
  unit: string; bloc: string; note?: string | null
}

const SCENARIO_ORDER = [
  'goldilocks', 'desinflation', 'soft_landing', 'reflation',
  'stagflation', 'inflation_shock', 'recession', 'crise_liquidite',
] as const

const BLOC_INFO: Record<string, { label: string; emoji: string; description: string }> = {
  liquidite:  { label: 'Global Liquidity',       emoji: '💧', description: 'Market fuel — DXY↓ = loose global conditions; yield curve = recession/recovery signal' },
  credit:     { label: 'Credit & Stress',        emoji: '⚡', description: 'Systemic thermometer — HYG (HY, bonds lead equities), LQD (IG), VIX' },
  energie:    { label: 'Energy',                 emoji: '⛽', description: 'Primary inflation driver — Brent↑↑ = stagflation/shock; Brent↓ = disinflationary' },
  metaux:     { label: 'Strategic Metals',       emoji: '🥇', description: 'Copper = "Dr Copper" (global growth); Gold = haven/real rates; Gold/Cu ratio = fear vs expansion bias' },
  croissance: { label: 'Global Growth',          emoji: '📊', description: 'Real cycle — S&P, Russell 2000 (breadth risk-on), XLI (ISM mfg proxy), Baltic Dry (secondary)' },
  derive:     { label: 'Derived Indicators',     emoji: '🔗', description: 'Slope 10Y–3M (recession) · Gold/Cu (fear vs expansion) · S&P vs 200d · Russell vs S&P (breadth)' },
}

const ASSET_BIAS_COLORS: Record<string, string> = {
  'bullish+': '#10b981', 'bullish': '#34d399', 'neutral': '#64748b',
  'bearish': '#f97316', 'bearish+': '#ef4444', 'defensive': '#f59e0b',
}
const ASSET_BIAS_LABELS: Record<string, string> = {
  'bullish+': '★★ Very Favorable', 'bullish': '★ Favorable', 'neutral': '→ Neutral',
  'bearish': '✗ Unfavorable', 'bearish+': '✗✗ Against', 'defensive': '⚠ Defensive',
}
const ASSET_CLASS_LABELS: Record<string, string> = {
  energy: 'Energy ⛽', metals: 'Metals 🥇', agriculture: 'Agriculture 🌾',
  indices: 'Indices 📊', equities: 'Equities 📈', forex: 'Forex 💱',
}

function GaugeRow({ g }: { g: MacroGauge }) {
  const val = g.value
  const chg = g.change_pct
  const up = chg != null && chg > 0
  const dn = chg != null && chg < 0
  const fmt = (v: number) => {
    if (v > 10000) return `${(v / 1000).toFixed(1)}k`
    if (v > 1000) return v.toFixed(0)
    if (v > 100) return v.toFixed(2)
    return v.toFixed(3)
  }
  return (
    <div className="flex items-center justify-between py-1 border-b border-slate-800/50 last:border-0 group">
      <div className="flex-1 min-w-0 mr-3">
        <span className="text-xs text-slate-300 group-hover:text-white transition-colors">{g.label}</span>
        {g.ticker && <span className="text-[10px] text-slate-700 ml-1.5">{g.ticker}</span>}
      </div>
      <div className="flex items-center gap-2 shrink-0">
        {val != null ? (
          <span className="text-sm font-mono font-semibold text-white">
            {fmt(val)}<span className="text-slate-600 text-xs ml-0.5">{g.unit}</span>
          </span>
        ) : (
          <span className="text-xs text-slate-700">N/A</span>
        )}
        {chg != null && (
          <span className={clsx('text-xs font-mono w-14 text-right', up ? 'text-emerald-400' : dn ? 'text-red-400' : 'text-slate-600')}>
            {up ? '↑' : dn ? '↓' : '→'} {Math.abs(chg).toFixed(2)}%
          </span>
        )}
        {g.note && (
          <span className="text-[10px] px-1.5 py-0.5 rounded bg-dark-600 text-slate-500 w-28 text-center truncate">
            {g.note}
          </span>
        )}
      </div>
    </div>
  )
}

function BlocCard({ id, gauges }: { id: string; gauges: MacroGauge[] }) {
  const [open, setOpen] = useState(true)
  const info = BLOC_INFO[id] ?? { label: id, emoji: '📌', description: '' }
  if (!gauges.length) return null
  return (
    <div className="card p-0 overflow-hidden">
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between px-3 py-2.5 hover:bg-dark-700/50 transition-colors"
      >
        <div>
          <div className="text-sm font-semibold text-white text-left">
            {info.emoji} {info.label}
          </div>
          <div className="text-[10px] text-slate-600 text-left mt-0.5">{info.description}</div>
        </div>
        {open ? <ChevronUp className="w-3.5 h-3.5 text-slate-600 shrink-0" /> : <ChevronDown className="w-3.5 h-3.5 text-slate-600 shrink-0" />}
      </button>
      {open && (
        <div className="px-3 pb-2 border-t border-slate-800/50">
          {gauges.map(g => <GaugeRow key={g.id} g={g} />)}
        </div>
      )}
    </div>
  )
}

export default function MacroRegime() {
  const { data, isLoading, refetch, isFetching, forceRefetch } = useMacroRegime()
  const { data: aiStatus } = useAiStatus()
  const [savedNarration, setSavedNarration] = useState<{ text: string; at: string } | null>(null)
  const [loadingNarration, setLoadingNarration] = useState(false)

  useEffect(() => {
    try {
      const raw = localStorage.getItem('geo-options:macro-narration')
      if (raw) setSavedNarration(JSON.parse(raw))
    } catch {}
  }, [])

  const gauges: Record<string, MacroGauge> = data?.gauges ?? {}
  const scenarios = data?.scenarios ?? {}
  const dominant: string = scenarios.dominant ?? 'incertain'
  const scores: Record<string, number> = scenarios.scores ?? {}
  const meta: Record<string, { label: string; color: string; emoji: string }> = scenarios.meta ?? {}
  const ranked: [string, number][] = scenarios.ranked ?? []
  const reasons: Record<string, string[]> = scenarios.reasons ?? {}
  const assetBias: Record<string, Record<string, string>> = scenarios.asset_bias ?? {}
  const historyDays: number = scenarios.history_days ?? 0
  const regimeStability: number = scenarios.regime_stability ?? 0
  const dominantMeta = meta[dominant] ?? { label: dominant, color: '#94a3b8', emoji: '?' }
  const dominantBias: Record<string, string> = assetBias[dominant] ?? {}

  // Group gauges by bloc
  const byBloc: Record<string, MacroGauge[]> = {}
  for (const g of Object.values(gauges)) {
    if (!byBloc[g.bloc]) byBloc[g.bloc] = []
    byBloc[g.bloc].push(g)
  }
  // Add derived gauges into their own bloc
  const derivedGauges = ([gauges.slope_10y3m, gauges.gold_copper_ratio, gauges.spx_vs_200d] as (MacroGauge | undefined)[])
    .filter((g): g is MacroGauge => !!g)
  if (derivedGauges.length) byBloc['derive'] = derivedGauges

  const handleAiNarration = async () => {
    setLoadingNarration(true)
    try {
      const freshData = await forceRefetch()
      const res = await api.post('/ai/macro-narration', { macro_regime: freshData })
      const text = res.data.narration ?? res.data.text ?? JSON.stringify(res.data)
      const entry = { text, at: new Date().toISOString() }
      setSavedNarration(entry)
      localStorage.setItem('geo-options:macro-narration', JSON.stringify(entry))
    } catch {
      const entry = { text: 'Error during generation — please check your OpenAI key.', at: new Date().toISOString() }
      setSavedNarration(entry)
    } finally {
      setLoadingNarration(false)
    }
  }

  return (
    <div className="p-6 space-y-5">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-xl font-bold text-white flex items-center gap-2">
            <Activity className="w-5 h-5 text-blue-400" /> Macro Regime
          </h1>
          <p className="text-xs text-slate-500 mt-0.5">
            30 institutional gauges · Regime detection · Scenario compatibility
          </p>
        </div>
        <div className="flex items-center gap-3">
          {data?.fetched_at && (
            <span className="text-xs text-slate-600">
              {data.cached ? `cache ${data.cache_age_sec}s` : 'live'} · {data.fetched_at.slice(11, 16)} UTC
            </span>
          )}
          <button
            onClick={() => refetch()}
            disabled={isFetching}
            className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white border border-slate-700 rounded px-2.5 py-1.5 transition-colors hover:border-slate-500 disabled:opacity-40"
          >
            <RefreshCw className={clsx('w-3.5 h-3.5', isFetching && 'animate-spin')} />
            Refresh
          </button>
        </div>
      </div>

      {isLoading ? (
        <div className="card flex items-center justify-center py-12 text-slate-600 text-sm">
          <RefreshCw className="w-4 h-4 animate-spin mr-2" /> Loading macro gauges...
        </div>
      ) : (
        <>
          {/* Dominant scenario banner */}
          {dominant !== 'incertain' && (
            <div className="rounded-xl border p-4 flex items-center gap-4"
              style={{ borderColor: `${dominantMeta.color}44`, background: `${dominantMeta.color}0d` }}>
              <div className="text-4xl">{dominantMeta.emoji}</div>
              <div className="flex-1">
                <div className="text-xs text-slate-500 uppercase tracking-widest mb-0.5">Dominant Scenario</div>
                <div className="text-xl font-bold" style={{ color: dominantMeta.color }}>{dominantMeta.label}</div>
                <div className="text-xs text-slate-500 mt-1 flex flex-wrap gap-1">
                  {(reasons[dominant] ?? []).map((r, i) => (
                    <span key={i} className="px-1.5 py-0.5 rounded text-[10px]"
                      style={{ background: `${dominantMeta.color}22`, color: dominantMeta.color }}>
                      {r}
                    </span>
                  ))}
                </div>
              </div>
              <div className="text-right shrink-0">
                <div className="text-3xl font-bold font-mono" style={{ color: dominantMeta.color }}>
                  {scores[dominant]}%
                </div>
                <div className="text-xs text-slate-600">regime score</div>
                {regimeStability > 0 && (
                  <div className="text-[10px] mt-1 px-1.5 py-0.5 rounded-full text-center"
                    style={{ background: `${dominantMeta.color}22`, color: dominantMeta.color }}>
                    stable {regimeStability}d
                  </div>
                )}
                {historyDays > 0 && (
                  <div className="text-[10px] text-slate-700 mt-0.5 text-center">
                    {historyDays}d history
                  </div>
                )}
              </div>
            </div>
          )}

          <div className="grid grid-cols-3 gap-5">
            {/* Left: Gauge blocs */}
            <div className="col-span-2 space-y-3">
              <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
                Gauges by bloc ({Object.values(gauges).length} indicators)
              </div>
              {['liquidite', 'credit', 'energie', 'metaux', 'croissance', 'derive'].map(bloc => (
                <BlocCard key={bloc} id={bloc} gauges={byBloc[bloc] ?? []} />
              ))}
            </div>

            {/* Right: Scenarios + asset compatibility */}
            <div className="space-y-4">
              {/* Scenario ranking */}
              <div className="card">
                <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">
                  Scenario Ranking
                </div>
                <div className="space-y-3">
                  {ranked.map(([key, score]) => {
                    const m = meta[key] ?? { label: key, color: '#94a3b8', emoji: '?' }
                    const isDom = key === dominant
                    const rl = reasons[key] ?? []
                    return (
                      <div key={key}>
                        <div className="flex items-center gap-2 mb-1">
                          <span className="text-sm w-5 text-center">{m.emoji}</span>
                          <span className="text-xs flex-1 font-medium"
                            style={{ color: isDom ? m.color : '#94a3b8', fontWeight: isDom ? 700 : 400 }}>
                            {m.label}
                          </span>
                          <span className="text-xs font-mono font-bold w-8 text-right"
                            style={{ color: isDom ? m.color : '#475569' }}>
                            {score}%
                          </span>
                        </div>
                        <div className="bg-slate-800 rounded-full h-1.5 overflow-hidden">
                          <div className="h-full rounded-full transition-all duration-700"
                            style={{ width: `${score}%`, background: m.color, opacity: isDom ? 1 : 0.45 }} />
                        </div>
                        {isDom && rl.length > 0 && (
                          <div className="mt-1 space-y-0.5">
                            {rl.slice(0, 3).map((r, i) => (
                              <div key={i} className="text-[10px] text-slate-600 flex items-center gap-1">
                                <span style={{ color: m.color }}>›</span> {r}
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>

              {/* Asset class compatibility for dominant scenario */}
              {dominant !== 'incertain' && Object.keys(dominantBias).length > 0 && (
                <div className="card">
                  <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">
                    Asset Classes · {dominantMeta.emoji} {dominantMeta.label}
                  </div>
                  <div className="space-y-1.5">
                    {Object.entries(dominantBias).map(([cls, bias]) => {
                      const col = ASSET_BIAS_COLORS[bias] ?? '#64748b'
                      const lbl = ASSET_BIAS_LABELS[bias] ?? bias
                      return (
                        <div key={cls} className="flex items-center justify-between">
                          <span className="text-xs text-slate-400">{ASSET_CLASS_LABELS[cls] ?? cls}</span>
                          <span className="text-xs font-semibold" style={{ color: col }}>{lbl}</span>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}

              {/* AI narration block */}
              <div className="card">
                <div className="flex items-center justify-between mb-2">
                  <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide flex items-center gap-1.5">
                    <Brain className="w-3.5 h-3.5 text-blue-400" /> AI Analysis
                  </div>
                  {savedNarration?.at && (
                    <span className="text-[10px] text-slate-700">
                      {new Date(savedNarration.at).toLocaleDateString('fr-FR', {
                        day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit',
                      })}
                    </span>
                  )}
                </div>
                {savedNarration ? (
                  <p className="text-xs text-slate-300 leading-relaxed mb-3">{savedNarration.text}</p>
                ) : (
                  <p className="text-xs text-slate-600 leading-relaxed mb-3">
                    GPT-4o can interpret the current regime, identify inconsistencies between gauges and suggest trading biases.
                  </p>
                )}
                {aiStatus?.enabled ? (
                  <button
                    onClick={handleAiNarration}
                    disabled={loadingNarration}
                    className="w-full text-xs bg-blue-600/20 hover:bg-blue-600/40 border border-blue-500/30 hover:border-blue-500/60 text-blue-300 rounded py-1.5 transition-all disabled:opacity-40 flex items-center justify-center gap-1.5"
                  >
                    {loadingNarration ? (
                      <><RefreshCw className="w-3 h-3 animate-spin" /> Analysis in progress...</>
                    ) : (
                      <><Brain className="w-3 h-3" /> {savedNarration ? 'Re-analyze' : 'Ask AI'}</>
                    )}
                  </button>
                ) : (
                  <div className="text-xs text-slate-700 text-center">OpenAI not configured</div>
                )}
              </div>

              {/* Reading order reminder */}
              <div className="card bg-dark-700/30">
                <div className="text-xs font-semibold text-slate-600 mb-2">Reading order (5 min)</div>
                <div className="space-y-0.5 text-[10px] text-slate-600">
                  <div>1. <span className="text-slate-500">Liquidity</span> → Fed balance sheet, DXY, real rates</div>
                  <div>2. <span className="text-slate-500">Credit</span> → HY spreads, VIX, MOVE</div>
                  <div>3. <span className="text-slate-500">Energy</span> → Brent, natural gas</div>
                  <div>4. <span className="text-slate-500">Metals</span> → Gold/Copper ratio</div>
                  <div>5. <span className="text-slate-500">Synthesis</span> → Dominant scenario</div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}