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

function Records() {
  const [tab, setTab] = useState("done");
  const list = tab === "done" ? SP_DATA.COMPLETED : SP_DATA.ONGOING;

  // KPIs (from completed)
  const total = SP_DATA.COMPLETED.length;
  const wins = SP_DATA.COMPLETED.filter((m) => m.result === "win").length;
  const wr = ((wins / total) * 100).toFixed(1);
  const profit = SP_DATA.COMPLETED.reduce((acc, m) => acc + (m.result === "win" ? (m.odds - 1) * 1 : -1), 0);
  const upcoming = SP_DATA.ONGOING.length;

  return (
    <FadeUp className="section" id="records">
      <SectionHead
        eyebrow="// 預測紀錄"
        title="預測紀錄與戰績"
        sub="所有 AI 推薦的可追蹤紀錄，公開透明"
        right={
          <div className="tabs">
            <button className={`tab ${tab === "done" ? "is-on" : ""}`} onClick={() => setTab("done")}>已完賽<span className="count">{SP_DATA.COMPLETED.length}</span></button>
            <button className={`tab ${tab === "open" ? "is-on" : ""}`} onClick={() => setTab("open")}>進行中<span className="count">{SP_DATA.ONGOING.length}</span></button>
          </div>
        }
      />

      <div className="kpi-row">
        <div className="kpi">
          <div className="lbl">近期勝率</div>
          <div className="val">{wr}%</div>
          <div className="delta up">▲ 4.2% / 30d</div>
        </div>
        <div className="kpi">
          <div className="lbl">累積收益 (unit)</div>
          <div className="val" style={{ color: "var(--accent)" }}>+{profit.toFixed(2)}</div>
          <div className="delta up">▲ 1.8u / 7d</div>
        </div>
        <div className="kpi">
          <div className="lbl">已完賽推薦</div>
          <div className="val">{total}</div>
          <div className="delta" style={{color:'var(--fg-2)'}}>近 7 天</div>
        </div>
        <div className="kpi" style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <div className="lbl">勝率走勢</div>
            <div className="val">68.4%</div>
            <div className="delta" style={{color:'var(--fg-2)'}}>14 天</div>
          </div>
          <Sparkline values={[55, 58, 62, 60, 64, 66, 65, 68, 70, 67, 72, 71, 68, 70]} width={88} height={36} />
        </div>
      </div>

      <div className="tbl-card">
        <table className="match-table">
          <thead>
            <tr>
              <th style={{width:'80px'}}>日期</th>
              <th style={{width:'70px'}}>聯盟</th>
              <th>對戰</th>
              <th>市場 / 推薦</th>
              <th style={{width:'80px'}}>賠率</th>
              <th style={{width:'180px'}}>信心度</th>
              <th style={{width:'120px'}}>{tab === "done" ? "結果" : "開賽"}</th>
            </tr>
          </thead>
          <tbody>
            {list.map((m, i) => (
              <tr key={i}>
                <td className="mono" style={{color:'var(--fg-2)'}}>{m.date}</td>
                <td><span className="chip">{m.lg}</span></td>
                <td className="teams">{m.home}<span className="vs">vs</span>{m.away}</td>
                <td><span style={{color:'var(--fg-2)', fontSize: 12, marginRight: 8}}>{m.market}</span><span className="pick">{m.pick}</span></td>
                <td className="mono">{m.odds.toFixed(2)}</td>
                <td><span className="conf"><span className="bar"><i style={{width: `${m.conf}%`}} /></span>{m.conf}%</span></td>
                <td>
                  {tab === "done" ? (
                    <>
                      <span className="mono" style={{color:'var(--fg-2)', marginRight: 8}}>{m.score}</span>
                      <span className={m.result === "win" ? "result-win" : "result-loss"}>{m.result === "win" ? "勝" : "負"}</span>
                    </>
                  ) : (
                    <span className="result-pending mono">{m.kickoff || "—"}</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </FadeUp>
  );
}

window.Records = Records;