import { useState, useEffect } from 'react'
import {
  FlaskConical, Library, Zap, BarChart3, RefreshCw, ChevronRight,
  Sliders, Brain, Search, Filter, CheckCircle, XCircle, Minus, AlertCircle,
} from 'lucide-react'
import clsx from 'clsx'

// ── Types ─────────────────────────────────────────────────────────────────────

interface CausalNode {
  id: string; label: string; type: 'input' | 'intermediate' | 'output'
  x: number; y: number; formula?: string; unit?: string; instrument?: string
}
interface CausalEdge {
  from: string; to: string; style: 'solid' | 'dashed'; type?: string; label?: string
}
interface Coefficient {
  value: number; calibrated: number | null; description: string
}
interface GraphJson {
  nodes: CausalNode[]; edges: CausalEdge[]
  coefficients: Record<string, Coefficient>
  instruments: string[]
  input_mapping: Record<string, { source: string; unit?: string; range?: number[] }>
}
interface Template {
  id: number; name: string; category: string; sub_type: string
  instruments: string[]; description: string; graph_json: GraphJson
  ai_rationale: string; calibration_json: Record<string, unknown>
  heuristic_ver: number
}
interface MarketEvent {
  id: number; name: string; category: string; sub_type: string
  start_date: string; level: string; impact_score: number
  market_impact: string; affected_assets: string
  actual_value: number | null; expected_value: number | null; surprise_pct: number | null
  analysis_id: number | null; template_id: number | null; activation_score: number | null
}
interface NodeResult {
  pred: number | null; act: number | null; status: string; label: string
}
interface AnalysisResult {
  event: MarketEvent; template_id: number; template_name: string; instrument: string
  inputs: Record<string, number>; node_values: Record<string, number>
  actual_moves: Record<string, number>; yields: Record<string, number | null>
  activation: {
    score: number | null; nodes: Record<string, NodeResult>; correct: number; total: number
  }
  drift: { pre_pips: number | null; post_pips: number | null; drift_ratio: number | null; leak: string }
  prices_mode: string; analyzed_at: string
}
interface Recommendation {
  template_id: number | null; template_name: string; confidence: number
  rationale: string; coefficient_suggestions: Record<string, number>
  instrument_focus: string[]; alternative_template_id: number | null; notes: string
  error?: string
}
interface CalibRow {
  id: number; name: string; category: string; sub_type: string
  n_analyses: number; avg_activation: number | null
  calibration: Record<string, { n?: number; avg_pred?: number; avg_actual?: number; coef_ratio?: number }>
}

// ── API ───────────────────────────────────────────────────────────────────────

const api = async (path: string, opts?: RequestInit) => {
  const r = await fetch(`http://localhost:8000${path}`, opts)
  if (!r.ok) { const t = await r.text(); throw new Error(t) }
  return r.json()
}

// ── Couleurs / labels ─────────────────────────────────────────────────────────

const NODE_COLORS: Record<string, string> = {
  input:        '#3b82f6',
  intermediate: '#8b5cf6',
  output:       '#10b981',
}
const STATUS_COLOR: Record<string, string> = {
  correct: '#10b981', wrong: '#ef4444', neutral: '#64748b', unknown: '#64748b',
}
const CAT_LABELS: Record<string, string> = {
  macro_us: 'Macro US', macro_eu: 'Macro EU', geopolitical: 'Géopolitique',
  commodity: 'Matières premières', report: 'Report', sentiment: 'Sentiment',
}
const fmtPips = (v: number | null | undefined) =>
  v == null ? '—' : `${v > 0 ? '+' : ''}${v.toFixed(0)} pip`

// ── SVG Graph renderer ────────────────────────────────────────────────────────

function GraphSVG({
  graph, nodeValues, activationNodes, compact = false,
}: {
  graph: GraphJson
  nodeValues?: Record<string, number>
  activationNodes?: Record<string, NodeResult>
  compact?: boolean
}) {
  const nodes = graph.nodes || []
  const edges = graph.edges || []
  const xs = nodes.map(n => n.x)
  const ys = nodes.map(n => n.y)
  const minX = Math.min(...xs, 0) - 40
  const minY = Math.min(...ys, 0) - 30
  const maxX = Math.max(...xs, 400) + 120
  const maxY = Math.max(...ys, 400) + 60
  const W = maxX - minX; const H = maxY - minY
  const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]))
  const NW = compact ? 90 : 115; const NH = compact ? 28 : 38

  function nodeColor(n: CausalNode) {
    if (activationNodes?.[n.id]) return STATUS_COLOR[activationNodes[n.id].status] ?? NODE_COLORS[n.type]
    return NODE_COLORS[n.type] ?? '#64748b'
  }
  function edgePath(e: CausalEdge) {
    const s = nodeMap[e.from]; const t = nodeMap[e.to]
    if (!s || !t) return ''
    const x1 = s.x; const y1 = s.y + NH / 2
    const x2 = t.x; const y2 = t.y - NH / 2
    const mx = (x1 + x2) / 2
    return `M${x1},${y1} C${x1},${mx} ${x2},${mx} ${x2},${y2}`
  }

  return (
    <svg viewBox={`${minX} ${minY} ${W} ${H}`}
      style={{ width: '100%', height: compact ? 280 : 460 }}
      className="overflow-visible">
      <defs>
        <marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
          <path d="M0,0 L0,6 L8,3 z" fill="#475569" />
        </marker>
      </defs>
      {edges.map((e, i) => {
        const s = nodeMap[e.from]; const t = nodeMap[e.to]
        if (!s || !t) return null
        return (
          <path key={i} d={edgePath(e)} fill="none" stroke="#475569" strokeWidth={1.5}
            strokeDasharray={e.style === 'dashed' ? '5,3' : undefined}
            markerEnd="url(#arrow)" opacity={0.8} />
        )
      })}
      {nodes.map(n => {
        const col  = nodeColor(n)
        const val  = nodeValues?.[n.id]
        const unit = n.unit || ''
        return (
          <g key={n.id} transform={`translate(${n.x - NW / 2},${n.y - NH / 2})`}>
            <rect width={NW} height={NH} rx={6} fill={col} fillOpacity={0.18}
              stroke={col} strokeWidth={1.5} />
            <text x={NW / 2} y={compact ? 11 : 14} textAnchor="middle"
              fill="#e2e8f0" fontSize={compact ? 9 : 10} fontWeight="600">
              {n.label.length > 18 ? n.label.slice(0, 17) + '…' : n.label}
            </text>
            {val != null && (
              <text x={NW / 2} y={compact ? 22 : 27} textAnchor="middle"
                fill={col} fontSize={compact ? 9 : 10} fontWeight="700">
                {val > 0 ? '+' : ''}{val.toFixed(1)}{unit ? ` ${unit}` : ''}
              </text>
            )}
          </g>
        )
      })}
    </svg>
  )
}

// ── Tab Bibliothèque ──────────────────────────────────────────────────────────

function TabLibrary() {
  const [templates, setTemplates] = useState<Template[]>([])
  const [selected, setSelected]   = useState<Template | null>(null)
  const [catFilter, setCatFilter] = useState('')
  const [saving, setSaving]       = useState(false)
  const [editCoefs, setEditCoefs] = useState<Record<string, number>>({})
  const [loading, setLoading]     = useState(true)
  const [apiError, setApiError]   = useState<string | null>(null)
  const [debugInfo, setDebugInfo] = useState<Record<string, unknown> | null>(null)

  useEffect(() => {
    setLoading(true); setApiError(null)
    api(`/api/causal-lab/templates${catFilter ? `?category=${catFilter}` : ''}`)
      .then(data => {
        setTemplates(data)
        if (data.length === 0) {
          // Auto-run debug to show diagnostic
          api('/api/causal-lab/debug').then(setDebugInfo).catch(() => {})
        }
      })
      .catch(e => setApiError(String(e)))
      .finally(() => setLoading(false))
  }, [catFilter])

  function selectTemplate(t: Template) {
    setSelected(t)
    setEditCoefs(Object.fromEntries(
      Object.entries(t.graph_json?.coefficients || {}).map(([k, v]) => [k, v.value])
    ))
  }

  async function saveCoefs() {
    if (!selected) return
    setSaving(true)
    try {
      await api(`/api/causal-lab/template/${selected.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ coefficients: editCoefs }),
      })
      const fresh = await api(`/api/causal-lab/template/${selected.id}`)
      setSelected(fresh)
    } finally { setSaving(false) }
  }

  const cats = [...new Set(templates.map(t => t.category))]

  return (
    <div className="flex gap-4">
      {/* Liste templates */}
      <div className="w-72 flex-shrink-0">
        <select value={catFilter} onChange={e => setCatFilter(e.target.value)}
          className="w-full mb-3 bg-dark-700 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-300">
          <option value="">Toutes les catégories</option>
          {cats.map(c => <option key={c} value={c}>{CAT_LABELS[c] ?? c}</option>)}
        </select>

        {apiError && (
          <div className="mb-2 p-3 bg-red-900/20 border border-red-700/40 rounded text-xs text-red-300 break-all">
            <div className="font-bold mb-1">Erreur API</div>
            {apiError}
          </div>
        )}
        {debugInfo && (
          <div className="mb-2 p-3 bg-yellow-900/20 border border-yellow-700/40 rounded text-xs text-yellow-200">
            <div className="font-bold mb-1">Diagnostic</div>
            <pre className="whitespace-pre-wrap">{JSON.stringify(debugInfo, null, 2)}</pre>
          </div>
        )}
        {loading
          ? <div className="text-slate-500 text-xs p-4">Chargement…</div>
          : <div className="space-y-1 overflow-y-auto max-h-[calc(100vh-230px)]">
              {templates.map(t => (
                <button key={t.id} onClick={() => selectTemplate(t)}
                  className={clsx('w-full text-left px-3 py-2.5 rounded border text-xs transition-all',
                    selected?.id === t.id
                      ? 'bg-blue-900/30 border-blue-500/50 text-blue-200'
                      : 'bg-dark-700 border-slate-700/50 text-slate-300 hover:border-slate-500')}>
                  <div className="font-medium truncate">{t.name}</div>
                  <div className="text-slate-500 mt-0.5 flex items-center gap-2">
                    <span className="px-1 rounded bg-slate-700/50">{CAT_LABELS[t.category] ?? t.category}</span>
                    <span>{t.instruments.join(', ')}</span>
                  </div>
                </button>
              ))}
            </div>
        }
      </div>

      {/* Détail */}
      {selected ? (
        <div className="flex-1 overflow-y-auto space-y-4">
          <div className="bg-dark-700 rounded-lg p-4 border border-slate-700/40">
            <div className="flex items-start justify-between mb-2">
              <div>
                <h3 className="text-white font-semibold">{selected.name}</h3>
                <p className="text-slate-400 text-xs mt-1">{selected.description}</p>
              </div>
              <span className="text-xs px-2 py-1 rounded bg-purple-900/30 text-purple-300 border border-purple-700/40">
                v{selected.heuristic_ver}
              </span>
            </div>
            {selected.ai_rationale && (
              <div className="mt-3 p-3 bg-blue-900/10 border border-blue-800/30 rounded text-xs text-blue-200">
                <Brain className="w-3 h-3 inline mr-1.5 text-blue-400" />
                {selected.ai_rationale}
              </div>
            )}
            <div className="mt-3 flex gap-2 flex-wrap">
              {selected.instruments.map(i => (
                <span key={i} className="text-xs px-2 py-0.5 rounded bg-emerald-900/20 text-emerald-400 border border-emerald-700/30">
                  {i}
                </span>
              ))}
            </div>
          </div>

          <div className="bg-dark-700 rounded-lg p-4 border border-slate-700/40">
            <h4 className="text-slate-300 text-xs font-semibold mb-3 uppercase tracking-wider">Graphe causal</h4>
            <GraphSVG graph={selected.graph_json} />
          </div>

          <div className="bg-dark-700 rounded-lg p-4 border border-slate-700/40">
            <h4 className="text-slate-300 text-xs font-semibold mb-3 uppercase tracking-wider flex items-center gap-2">
              <Sliders className="w-3.5 h-3.5" /> Coefficients heuristiques
            </h4>
            <div className="space-y-3">
              {Object.entries(selected.graph_json?.coefficients || {}).map(([k, c]) => (
                <div key={k} className="grid grid-cols-[1fr_auto] gap-3 items-center">
                  <div>
                    <div className="text-xs text-slate-300 font-medium">{k}</div>
                    <div className="text-xs text-slate-500">{c.description}</div>
                  </div>
                  <input type="number" step="0.001"
                    value={editCoefs[k] ?? c.value}
                    onChange={e => setEditCoefs(p => ({ ...p, [k]: parseFloat(e.target.value) }))}
                    className="w-28 bg-dark-800 border border-slate-600 rounded px-2 py-1 text-xs text-slate-200 text-right" />
                </div>
              ))}
            </div>
            <button onClick={saveCoefs} disabled={saving}
              className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 rounded text-xs font-medium text-white">
              {saving ? 'Sauvegarde…' : 'Sauvegarder les coefficients'}
            </button>
          </div>
        </div>
      ) : (
        <div className="flex-1 flex items-center justify-center text-slate-600 text-sm">
          Sélectionnez un template dans la liste
        </div>
      )}
    </div>
  )
}

// ── Tab Analyser ──────────────────────────────────────────────────────────────

function TabAnalyze() {
  const [events, setEvents]       = useState<MarketEvent[]>([])
  const [templates, setTemplates] = useState<Template[]>([])
  const [selEvent, setSelEvent]   = useState<MarketEvent | null>(null)
  const [selTmpl, setSelTmpl]     = useState<number>(0)
  const [instrument, setInstr]    = useState('EURUSD')
  const [manualInputs, setManual] = useState<Record<string, number>>({})
  const [result, setResult]       = useState<AnalysisResult | null>(null)
  const [rec, setRec]             = useState<Recommendation | null>(null)
  const [loadingRec, setLoadRec]  = useState(false)
  const [loadingAn, setLoadAn]    = useState(false)
  const [q, setQ]                 = useState('')
  const [catF, setCatF]           = useState('')
  const [error, setError]         = useState('')

  useEffect(() => {
    Promise.all([
      api(`/api/causal-lab/market-events?limit=200${catF ? `&category=${catF}` : ''}${q ? `&q=${encodeURIComponent(q)}` : ''}`),
      api('/api/causal-lab/templates'),
    ]).then(([evs, tmps]) => { setEvents(evs); setTemplates(tmps) })
  }, [catF, q])

  const currentTemplate = templates.find(t => t.id === selTmpl)
  const manualNodes = currentTemplate?.graph_json?.input_mapping
    ? Object.entries(currentTemplate.graph_json.input_mapping).filter(([, c]) => c.source === 'user_input')
    : []

  async function recommend() {
    if (!selEvent) return
    setLoadRec(true); setRec(null); setError('')
    try {
      const r = await api('/api/causal-lab/recommend', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ market_event_id: selEvent.id }),
      })
      setRec(r.recommendation)
      if (r.recommendation?.template_id) setSelTmpl(r.recommendation.template_id)
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : String(e))
    } finally { setLoadRec(false) }
  }

  async function analyze() {
    if (!selEvent || !selTmpl) return
    setLoadAn(true); setResult(null); setError('')
    try {
      const r = await api('/api/causal-lab/analyze', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          market_event_id: selEvent.id,
          template_id: selTmpl, instrument,
          inputs: manualInputs, coef_overrides: {},
        }),
      })
      setResult(r)
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : String(e))
    } finally { setLoadAn(false) }
  }

  return (
    <div className="flex gap-4">
      {/* Colonne gauche */}
      <div className="w-72 flex-shrink-0 space-y-3">
        <div className="flex gap-2">
          <div className="relative flex-1">
            <Search className="w-3.5 h-3.5 absolute left-2 top-2 text-slate-500" />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Rechercher un événement…"
              className="w-full bg-dark-700 border border-slate-700 rounded pl-7 pr-2 py-1.5 text-xs text-slate-300" />
          </div>
          <select value={catF} onChange={e => setCatF(e.target.value)}
            className="bg-dark-700 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-300">
            <option value="">Tous</option>
            {Object.entries(CAT_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
          </select>
        </div>

        <div className="space-y-1 overflow-y-auto max-h-64 border border-slate-700/30 rounded-lg p-1">
          {events.length === 0
            ? <div className="text-slate-600 text-xs p-3 text-center">Aucun événement</div>
            : events.map(ev => (
              <button key={ev.id} onClick={() => { setSelEvent(ev); setResult(null); setRec(null) }}
                className={clsx('w-full text-left px-3 py-2 rounded border text-xs transition-all',
                  selEvent?.id === ev.id
                    ? 'bg-blue-900/30 border-blue-500/50 text-blue-200'
                    : 'bg-dark-700 border-slate-700/50 text-slate-300 hover:border-slate-500')}>
                <div className="font-medium truncate">{ev.name}</div>
                <div className="text-slate-500 flex justify-between">
                  <span>{ev.start_date?.slice(0, 10)}</span>
                  {ev.activation_score != null && (
                    <span className={clsx('font-semibold',
                      ev.activation_score >= 0.7 ? 'text-emerald-400' :
                      ev.activation_score >= 0.4 ? 'text-yellow-400' : 'text-red-400')}>
                      {(ev.activation_score * 100).toFixed(0)}%
                    </span>
                  )}
                </div>
              </button>
          ))}
        </div>

        <select value={selTmpl} onChange={e => setSelTmpl(Number(e.target.value))}
          className="w-full bg-dark-700 border border-slate-700 rounded px-2 py-2 text-xs text-slate-300">
          <option value={0}>— Choisir un template —</option>
          {templates.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
        </select>

        <select value={instrument} onChange={e => setInstr(e.target.value)}
          className="w-full bg-dark-700 border border-slate-700 rounded px-2 py-2 text-xs text-slate-300">
          {['EURUSD', 'XAUUSD', 'SP500', 'BRENT'].map(i => <option key={i} value={i}>{i}</option>)}
        </select>

        {manualNodes.length > 0 && (
          <div className="bg-dark-800 rounded p-3 space-y-2 border border-slate-700/30">
            <div className="text-xs text-slate-400 font-semibold">Inputs manuels</div>
            {manualNodes.map(([id, cfg]) => {
              const range = cfg.range as [number, number] | undefined
              return (
                <div key={id} className="flex items-center gap-2">
                  <span className="text-xs text-slate-400 flex-1 capitalize">{id.replace(/_/g, ' ')}</span>
                  <input type="range" min={range?.[0] ?? -3} max={range?.[1] ?? 3} step={0.5}
                    value={manualInputs[id] ?? 0}
                    onChange={e => setManual(p => ({ ...p, [id]: parseFloat(e.target.value) }))}
                    className="w-24" />
                  <span className="text-xs text-slate-300 w-8 text-right">
                    {(manualInputs[id] ?? 0) > 0 ? '+' : ''}{manualInputs[id] ?? 0}
                  </span>
                </div>
              )
            })}
          </div>
        )}

        <button onClick={recommend} disabled={!selEvent || loadingRec}
          className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-purple-700/50 hover:bg-purple-700 disabled:opacity-40 rounded text-xs font-medium text-purple-200 border border-purple-700/40">
          <Brain className="w-3.5 h-3.5" />
          {loadingRec ? 'GPT-4o analyse…' : 'Recommandation GPT-4o'}
        </button>
        <button onClick={analyze} disabled={!selEvent || !selTmpl || loadingAn}
          className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-blue-600 hover:bg-blue-500 disabled:opacity-40 rounded text-xs font-medium text-white">
          <Zap className="w-3.5 h-3.5" />
          {loadingAn ? 'Analyse…' : 'Lancer l\'analyse'}
        </button>

        {error && (
          <div className="p-3 bg-red-900/20 border border-red-700/40 rounded text-xs text-red-300">{error}</div>
        )}
      </div>

      {/* Colonne droite: résultats */}
      <div className="flex-1 space-y-4 min-w-0">
        {/* Recommandation IA */}
        {rec && (
          <div className="bg-purple-900/10 border border-purple-700/30 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <Brain className="w-4 h-4 text-purple-400" />
              <span className="text-sm font-semibold text-purple-200">Recommandation GPT-4o</span>
              {rec.confidence != null && (
                <span className="ml-auto text-xs text-purple-400 font-bold">
                  {(rec.confidence * 100).toFixed(0)}% confiance
                </span>
              )}
            </div>
            {rec.error
              ? <div className="text-red-400 text-xs">{rec.error}</div>
              : <>
                  <div className="text-sm text-white font-medium mb-1">Template : {rec.template_name}</div>
                  <p className="text-xs text-purple-200/80">{rec.rationale}</p>
                  {rec.notes && <p className="text-xs text-slate-400 mt-1">{rec.notes}</p>}
                  {Object.keys(rec.coefficient_suggestions || {}).length > 0 && (
                    <div className="mt-2 flex flex-wrap gap-2">
                      {Object.entries(rec.coefficient_suggestions).map(([k, v]) => (
                        <span key={k} className="text-xs px-2 py-0.5 bg-purple-900/30 text-purple-300 rounded border border-purple-700/30">
                          {k} = {v}
                        </span>
                      ))}
                    </div>
                  )}
                </>
            }
          </div>
        )}

        {/* Résultat */}
        {result && (
          <>
            <div className="bg-dark-700 rounded-lg p-4 border border-slate-700/40">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-white font-semibold text-sm">{result.event.name}</h3>
                <div className="flex items-center gap-3">
                  <span className="text-xs text-slate-400">{result.event.start_date?.slice(0, 10)}</span>
                  <span className={clsx('text-sm font-bold px-3 py-1 rounded',
                    result.activation.score == null          ? 'text-slate-400 bg-slate-800' :
                    result.activation.score >= 0.7           ? 'text-emerald-400 bg-emerald-900/30' :
                    result.activation.score >= 0.4           ? 'text-yellow-400 bg-yellow-900/30' :
                                                               'text-red-400 bg-red-900/30')}>
                    {result.activation.score != null
                      ? `${(result.activation.score * 100).toFixed(0)}% activation`
                      : 'N/A'}
                  </span>
                </div>
              </div>

              <div className="grid grid-cols-4 gap-3 mb-3">
                {[
                  { label: 'Pré-drift', val: fmtPips(result.drift?.pre_pips) },
                  { label: 'Réel post', val: fmtPips(result.drift?.post_pips) },
                  { label: 'Mode prix', val: result.prices_mode },
                  { label: 'Fuite info', val: result.drift?.leak ?? '—' },
                ].map(m => (
                  <div key={m.label} className="bg-dark-800 rounded p-3 text-center">
                    <div className="text-xs text-slate-500">{m.label}</div>
                    <div className="text-sm font-bold text-slate-200 mt-0.5">{m.val}</div>
                  </div>
                ))}
              </div>

              <div className="flex flex-wrap gap-2">
                {Object.entries(result.activation.nodes).map(([id, node]) => {
                  const Icon = node.status === 'correct' ? CheckCircle : node.status === 'wrong' ? XCircle : Minus
                  const col =
                    node.status === 'correct' ? 'text-emerald-400 border-emerald-700/40 bg-emerald-900/10' :
                    node.status === 'wrong'   ? 'text-red-400 border-red-700/40 bg-red-900/10' :
                    'text-slate-500 border-slate-700/40 bg-slate-800/30'
                  return (
                    <div key={id} className={clsx('flex items-center gap-1.5 px-3 py-1.5 rounded border text-xs', col)}>
                      <Icon className="w-3.5 h-3.5" />
                      <span>{node.label}</span>
                      {node.pred != null && (
                        <span className="opacity-70">
                          P:{node.pred > 0 ? '+' : ''}{node.pred.toFixed(1)} /
                          A:{node.act != null ? (node.act > 0 ? '+' : '') + node.act.toFixed(1) : '—'}
                        </span>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>

            <div className="bg-dark-700 rounded-lg p-4 border border-slate-700/40">
              <h4 className="text-slate-300 text-xs font-semibold mb-3 uppercase tracking-wider">
                Graphe causal — valeurs calculées
              </h4>
              {currentTemplate && (
                <GraphSVG graph={currentTemplate.graph_json}
                  nodeValues={result.node_values}
                  activationNodes={result.activation.nodes} />
              )}
            </div>

            {result.yields && (
              <div className="bg-dark-700 rounded-lg p-4 border border-slate-700/40">
                <h4 className="text-slate-300 text-xs font-semibold mb-3 uppercase tracking-wider">
                  Taux réels
                </h4>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { label: 'US 10Y', v: result.yields.us10y },
                    { label: 'EU 10Y', v: result.yields.eu10y },
                    { label: 'US 2Y',  v: result.yields.us2y  },
                  ].map(y => (
                    <div key={y.label} className="bg-dark-800 rounded p-3 text-center">
                      <div className="text-xs text-slate-500">{y.label}</div>
                      <div className={clsx('text-sm font-bold mt-0.5',
                        y.v == null ? 'text-slate-600' : y.v > 0 ? 'text-red-400' : 'text-emerald-400')}>
                        {y.v == null ? '—' : `${y.v > 0 ? '+' : ''}${y.v.toFixed(3)}%`}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </>
        )}

        {(loadingAn || loadingRec) && (
          <div className="flex items-center justify-center h-48 text-slate-500 gap-3">
            <RefreshCw className="w-5 h-5 animate-spin" />
            <span className="text-sm">
              {loadingAn ? 'Récupération des prix (yfinance)…' : 'GPT-4o en cours…'}
            </span>
          </div>
        )}

        {!result && !loadingAn && !loadingRec && !rec && (
          <div className="flex flex-col items-center justify-center h-64 text-slate-600 space-y-3">
            <FlaskConical className="w-12 h-12 opacity-30" />
            <div className="text-sm text-center">
              Sélectionnez un événement, choisissez un template et lancez l'analyse
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

// ── Tab Calibration ───────────────────────────────────────────────────────────

function TabCalibration() {
  const [data, setData]   = useState<CalibRow[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    api('/api/causal-lab/calibration').then(setData).finally(() => setLoading(false))
  }, [])

  if (loading) return <div className="text-slate-500 text-sm p-6">Chargement…</div>

  return (
    <div className="space-y-3">
      <div className="text-xs text-slate-500 flex items-center gap-2">
        <AlertCircle className="w-3.5 h-3.5" />
        Statistiques agrégées de toutes les analyses par template.
        Le ratio pred/réel converge vers 1.0 quand les coefficients sont bien calibrés.
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-slate-700/50">
              {['Template', 'Catégorie', 'Nb analyses', 'Activation moy.', 'Pred. moy. (pip)', 'Réel moy. (pip)', 'Ratio'].map(h => (
                <th key={h} className="px-3 py-2 text-left text-slate-500 uppercase tracking-wider font-medium">{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data.map(row => {
              const calib = row.calibration || {}
              const instKey = Object.keys(calib).find(k =>
                !['n_events', 'avg_activation', 'last_analyzed'].includes(k))
              const instData = instKey ? calib[instKey] : null
              return (
                <tr key={row.id} className="border-b border-slate-800/50 hover:bg-dark-700/30 transition-colors">
                  <td className="px-3 py-2.5 text-slate-200 font-medium">{row.name}</td>
                  <td className="px-3 py-2.5 text-slate-400">{CAT_LABELS[row.category] ?? row.category}</td>
                  <td className="px-3 py-2.5 text-slate-300">{row.n_analyses}</td>
                  <td className="px-3 py-2.5">
                    {row.avg_activation != null
                      ? <span className={clsx('font-bold',
                          row.avg_activation >= 0.7 ? 'text-emerald-400' :
                          row.avg_activation >= 0.4 ? 'text-yellow-400' : 'text-red-400')}>
                          {(row.avg_activation * 100).toFixed(0)}%
                        </span>
                      : <span className="text-slate-600">—</span>}
                  </td>
                  <td className="px-3 py-2.5 text-slate-300">{instData?.avg_pred?.toFixed(1) ?? '—'}</td>
                  <td className="px-3 py-2.5 text-slate-300">{instData?.avg_actual?.toFixed(1) ?? '—'}</td>
                  <td className="px-3 py-2.5">
                    {instData?.coef_ratio != null
                      ? <span className={clsx('font-bold',
                          Math.abs(instData.coef_ratio - 1) < 0.2 ? 'text-emerald-400' :
                          Math.abs(instData.coef_ratio - 1) < 0.5 ? 'text-yellow-400' : 'text-red-400')}>
                          {instData.coef_ratio.toFixed(2)}x
                        </span>
                      : <span className="text-slate-600">—</span>}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {data.length === 0 && (
          <div className="text-center py-12 text-slate-600 text-sm">
            Aucune analyse effectuée pour l'instant. Lancez des analyses dans l'onglet "Analyser".
          </div>
        )}
      </div>
    </div>
  )
}

// ── Page principale ───────────────────────────────────────────────────────────

const TABS = [
  { id: 'library', label: 'Bibliothèque',  icon: Library     },
  { id: 'analyze', label: 'Analyser',      icon: FlaskConical },
  { id: 'calib',   label: 'Calibration',   icon: BarChart3   },
]

export default function CausalLab() {
  const [tab, setTab] = useState('library')

  return (
    <div className="p-6 min-h-screen">
      <div className="flex items-center gap-3 mb-6">
        <FlaskConical className="w-6 h-6 text-blue-400" />
        <div>
          <h1 className="text-xl font-bold text-white">Lab Causal</h1>
          <p className="text-slate-400 text-xs mt-0.5">
            Bibliothèque de graphes causaux · Analyse empirique · Calibration IA
          </p>
        </div>
      </div>

      <div className="flex gap-1 mb-6 bg-dark-800 p-1 rounded-lg w-fit border border-slate-700/30">
        {TABS.map(({ id, label, icon: Icon }) => (
          <button key={id} onClick={() => setTab(id)}
            className={clsx('flex items-center gap-2 px-4 py-2 rounded text-sm font-medium transition-all',
              tab === id ? 'bg-blue-600 text-white' : 'text-slate-400 hover:text-slate-200')}>
            <Icon className="w-4 h-4" />
            {label}
          </button>
        ))}
      </div>

      <div className="bg-dark-800 rounded-xl p-5 border border-slate-700/30">
        {tab === 'library' && <TabLibrary />}
        {tab === 'analyze' && <TabAnalyze />}
        {tab === 'calib'   && <TabCalibration />}
      </div>
    </div>
  )
}