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

function CustomModel() {
  const { SPORTS, LEAGUES, MARKETS, STRATEGIES, CUSTOM_MODELS } = SP_DATA;
  const [sport, setSport] = useState("soccer");
  const [league, setLeague] = useState("uefa");
  const [market, setMarket] = useState("ah");
  const [strategy, setStrategy] = useState("value");
  const [name, setName] = useState("我的歐冠模型");

  const filled = [sport, league, market, strategy].filter(Boolean).length;

  return (
    <FadeUp className="section" id="custom">
      <SectionHead
        eyebrow="// 客製化模型"
        title="建立屬於你的分析模型"
        sub="挑選你關心的聯盟與策略，AI 為你打造一個專屬模型，每天自動回報結果"
      />
      <div className="cm-grid">
        <div className="cm-builder">
          <h3>新增模型</h3>
          <p className="sub">完成 4 個步驟，模型會立即開始追蹤對應賽事</p>
          <div className="cm-step is-done">
            <div className="num">1</div>
            <div className="body">
              <h4>選擇運動</h4>
              <div className="options">
                {SPORTS.map((s) => (
                  <button key={s.id} className={`chip-btn ${sport === s.id ? "is-on" : ""}`} onClick={() => setSport(s.id)}>{s.emoji} {s.name}</button>
                ))}
              </div>
            </div>
          </div>
          <div className="cm-step is-done">
            <div className="num">2</div>
            <div className="body">
              <h4>選擇聯盟</h4>
              <div className="options">
                {(LEAGUES[sport] || []).map((l) => (
                  <button key={l.id} className={`chip-btn ${league === l.id ? "is-on" : ""}`} onClick={() => setLeague(l.id)}>{l.name}</button>
                ))}
              </div>
            </div>
          </div>
          <div className="cm-step is-done">
            <div className="num">3</div>
            <div className="body">
              <h4>選擇玩法</h4>
              <div className="options">
                {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>
          <div className="cm-step is-done">
            <div className="num">4</div>
            <div className="body">
              <h4>命名模型</h4>
              <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                style={{
                  width: "100%",
                  padding: "10px 14px",
                  background: "var(--bg-2)",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--r-sm)",
                  color: "var(--fg)",
                  fontFamily: "var(--font-tc)",
                  fontSize: 13,
                }}
              />
              <button className="btn btn-primary" style={{ marginTop: 16 }}>＋ 新增模型</button>
            </div>
          </div>
        </div>

        <div className="cm-list">
          <div className="cm-list-head">
            <span>已建立的模型 · {CUSTOM_MODELS.length}</span>
            <span style={{ color: 'var(--accent)' }}>● ACTIVE</span>
          </div>
          {CUSTOM_MODELS.map((m, i) => (
            <div className="cm-item" key={i}>
              <div className="dot" />
              <div className="info">
                <div className="name">{m.name}</div>
                <div className="tags">
                  {m.tags.map((t) => <span key={t} className="chip">{t}</span>)}
                </div>
              </div>
              <div className="stats">
                <div className="stat">
                  <div className="v pos">{m.wr}%</div>
                  <div className="l">勝率</div>
                </div>
                <div className="stat">
                  <div className="v">{m.runs}</div>
                  <div className="l">已分析</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </FadeUp>
  );
}

window.CustomModel = CustomModel;