/* global React, FadeUp, SectionHead, SP_DATA */
const { useState, useEffect, useRef } = React;

function Analyzer() {
  const { SPORTS, LEAGUES, MARKETS, STRATEGIES } = SP_DATA;
  const [sport, setSport] = useState("soccer");
  const [league, setLeague] = useState("epl");
  const [market, setMarket] = useState("ah");
  const [strategy, setStrategy] = useState("value");
  const [running, setRunning] = useState(false);
  const [streamed, setStreamed] = useState("");
  const [done, setDone] = useState(false);
  const [conf, setConf] = useState(0);
  const [thinking, setThinking] = useState(false);
  const [statusIdx, setStatusIdx] = useState(0);
  const containerRef = useRef(null);

  const STATUS_STEPS = [
    "正在分析",
    "運動資料整理中",
    "比對歷史賠率與盤口",
    "展開深度因子",
    "計算模型信心度",
    "產出結構化情報",
  ];

  const leagues = LEAGUES[sport] || [];
  useEffect(() => {
    if (!leagues.find((l) => l.id === league) && leagues[0]) setLeague(leagues[0].id);
  }, [sport]);

  const SCRIPT = useRef(null);
  const buildScript = () => {
    const ln = SPORTS.find((s) => s.id === sport)?.name;
    const lg = (LEAGUES[sport] || []).find((l) => l.id === league)?.name;
    const mk = MARKETS.find((m) => m.id === market)?.name;
    const st = STRATEGIES.find((s) => s.id === strategy)?.name;
    return `# 賽事 · ${lg} · ${ln}\n# 市場 · ${mk} · 策略 · ${st}\n\n模型已掃描過去 90 天 ${lg} 共 248 場賽事，並對今晚 7 場進行特徵展開。\n\n核心訊號\n以 ${st}框架交叉比對賠率與深度因子後，AI 找到一組勝率高於市場隱含 8.4% 的倉位：\n\n  → Bayern Munich vs Real Madrid · ${mk} · RMA +0.5\n  → 賠率 1.83 · 模型隱含勝率 70.4%\n  → 預期收益 +14.6 unit·\n\n背後邏輯\n1. 拜仁本季在歐冠主場面對西甲球隊時，xG 差距僅 +0.21，遠低於聯賽水準。\n2. 皇馬近 6 場客場連續 BTTS，且關鍵球員回歸首發。\n3. 盤口在開盤後 2 小時內已被推升 0.25，市場已過度反映拜仁主場優勢。\n\n風險提醒\n若姆巴佩無法上場，建議降低倉位至 1 unit。`;
  };

  const startStream = (text) => {
    setRunning(true);
    setThinking(false);
    let i = 0;
    const tick = () => {
      i = Math.min(i + 2 + Math.floor(Math.random() * 3), text.length);
      setStreamed(text.slice(0, i));
      if (containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
      if (i < text.length) {
        setTimeout(tick, 28 + Math.random() * 30);
      } else {
        setRunning(false);
        setDone(true);
        // animate confidence bar
        let c = 0;
        const cTick = setInterval(() => {
          c += 4;
          if (c >= 70) { c = 70; clearInterval(cTick); }
          setConf(c);
        }, 24);
      }
    };
    tick();
  };

  const run = () => {
    setDone(false);
    setStreamed("");
    setConf(0);
    setStatusIdx(0);
    setThinking(true);
    const text = buildScript();
    SCRIPT.current = text;
    let idx = 0;
    const cycle = () => {
      idx += 1;
      if (idx >= STATUS_STEPS.length) {
        startStream(text);
        return;
      }
      setStatusIdx(idx);
      setTimeout(cycle, 720);
    };
    setTimeout(cycle, 720);
  };

  return (
    <FadeUp className="section" id="analyzer">
      <SectionHead
        eyebrow="// AI 智慧分析"
        title="AI 賽事分析師"
        sub="選擇賽事與策略，AI 即時為你產出結構化情報"
      />
      <div className="analyzer">
        <aside className="analyzer-form">
          <div className="form-head">
            <span>分析參數</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>04 / 04</span>
          </div>
          <div className="form-body">
            <div className="field">
              <div className="field-label"><span>運動類型</span><span className="num">01</span></div>
              <div className="chip-row">
                {SPORTS.map((s) => (
                  <button key={s.id} className={`chip-btn ${sport === s.id ? "is-on" : ""}`} onClick={() => setSport(s.id)}>
                    <span style={{marginRight:4}}>{s.emoji}</span>{s.name}
                  </button>
                ))}
              </div>
            </div>
            <div className="field">
              <div className="field-label"><span>聯盟</span><span className="num">02</span></div>
              <div className="chip-row">
                {leagues.map((l) => (
                  <button key={l.id} className={`chip-btn ${league === l.id ? "is-on" : ""}`} onClick={() => setLeague(l.id)}>{l.name}</button>
                ))}
              </div>
            </div>
            <div className="field">
              <div className="field-label"><span>玩法</span><span className="num">03</span></div>
              <div className="chip-row">
                {MARKETS.map((m) => (
                  <button key={m.id} className={`chip-btn ${market === m.id ? "is-on" : ""}`} onClick={() => setMarket(m.id)}>{m.name}</button>
                ))}
              </div>
            </div>
            <div className="field">
              <div className="field-label"><span>策略框架</span><span className="num">04</span></div>
              <div className="chip-row">
                {STRATEGIES.map((s) => (
                  <button key={s.id} className={`chip-btn ${strategy === s.id ? "is-on" : ""}`} onClick={() => setStrategy(s.id)}>{s.name}</button>
                ))}
              </div>
            </div>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 8 }} onClick={run} disabled={running || thinking}>
              {thinking ? "AI 思考中…" : running ? "AI 分析中…" : "▶ 執行分析"}
            </button>
          </div>
        </aside>

        <div className="analyzer-output">
          <div className="output-head">
            <div className="output-meta">
              <span className="item">運動<b>{SPORTS.find(s=>s.id===sport)?.name}</b></span>
              <span className="item">聯盟<b>{leagues.find(l=>l.id===league)?.name}</b></span>
              <span className="item">市場<b>{MARKETS.find(m=>m.id===market)?.name}</b></span>
              <span className="item">策略<b>{STRATEGIES.find(s=>s.id===strategy)?.name}</b></span>
            </div>
            {(running || done) && <span className="chip chip-accent">{running ? "STREAMING…" : "完成"}</span>}
            {thinking && <span className="chip chip-accent">THINKING…</span>}
          </div>
          <div className="output-body" ref={containerRef}>
            {!running && !done && !thinking && (
              <div className="empty">
                <div>
                  <div className="glyph">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                      <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
                    </svg>
                  </div>
                  <div style={{fontSize:14, color:'var(--fg-1)', marginBottom: 4}}>選擇左側參數，按下「執行分析」</div>
                  <div style={{fontSize:12}}>AI 將在 3 秒內串流出本場賽事的結構化分析</div>
                  <div className="suggestion-row" style={{justifyContent:'center', marginTop:16}}>
                    <button className="s" onClick={() => { setSport("soccer"); setLeague("uefa"); setMarket("ah"); setStrategy("value"); }}>UCL · 讓分 · 價值倉</button>
                    <button className="s" onClick={() => { setSport("basket"); setLeague("nba"); setMarket("ou"); setStrategy("trend"); }}>NBA · 大小 · 趨勢</button>
                    <button className="s" onClick={() => { setSport("baseball"); setLeague("mlb"); setMarket("win"); setStrategy("underdog"); }}>MLB · 獨贏 · 冷門</button>
                  </div>
                </div>
              </div>
            )}
            {(running || done || thinking) && (
              <div className="bubble-ai">
                <div className="avatar-ai">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 3 L21 8 V16 L12 21 L3 16 V8 Z" />
                    <path d="M12 3 V21 M3 8 L21 16 M21 8 L3 16" opacity="0.35" />
                  </svg>
                </div>
                <div className="body">
                  <div className="ai-head">
                    <div className="ai-name">Sports365 AI <span className="ai-sub">/ 分析報告</span></div>
                    <div className="ai-status mono">
                      {thinking ? "thinking" : running ? "streaming" : "complete"}
                    </div>
                  </div>
                  {thinking ? (
                    <div className="ai-thinking">
                      <div className="pulse-dot"></div>
                      <div className="thinking-roll">
                        <div key={statusIdx} className="thinking-line">
                          {STATUS_STEPS[statusIdx]}<em className="dots"><i>.</i><i>.</i><i>.</i></em>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <pre style={{ margin: 0, fontFamily: 'var(--font-tc)', whiteSpace: 'pre-wrap', fontSize: 13.5, lineHeight: 1.75 }}>
                      {streamed}
                      {running && <span className="stream-cursor" />}
                    </pre>
                  )}
                    {done && (
                      <div className="confidence-bar">
                        <div className="top">
                          <span className="lbl">模型信心度 / Confidence</span>
                          <span className="val mono">{conf.toFixed(1)}%</span>
                        </div>
                        <div className="meter"><i style={{ width: `${conf}%` }} /></div>
                        <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)' }}>
                          <span>建議倉位 1.5 unit</span>
                          <span>預期收益 +14.6 unit</span>
                        </div>
                      </div>
                    )}
                    {done && (
                      <div className="suggestion-row">
                        <button className="s">展開技術細節</button>
                        <button className="s">查看相似賽事</button>
                        <button className="s">加入觀察清單</button>
                      </div>
                    )}
                  </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </FadeUp>
  );
}

window.Analyzer = Analyzer;