/* demo-views.jsx — /demo（?demo=1）でのみ表示する試作2ビュー。
   ① NewRecordsView … 今大会で更新された「大学記録」まとめ（日本のローイングの成長を見せる）
   ② PostEntryDemoView … 大会後のエントリータブ案（種目カードに表彰台を直載せ＝日程タブとの被り解消案） */

function NewRecordsView() {
  const NR = (window.KANSAI && window.KANSAI.NEWREC) || { items: [] };
  const [sortBy, setSortBy] = React.useState("gain");   // gain=更新幅順 / ev=種目順
  const EVORDER = ["M1X", "W1X", "M2X", "W2X", "M2-", "W2-", "M4-", "M4X", "W4X", "M4+", "W4+", "M8+", "W8+"];
  const items = [...NR.items].sort(sortBy === "gain"
    ? (a, b) => b.gain - a.gain
    : (a, b) => EVORDER.indexOf(a.ev) - EVORDER.indexOf(b.ev) || b.gain - a.gain);
  const teams = new Set(NR.items.map(i => i.team)).size;
  return (
    <section className="view">
      <div className="shead"><span className="tag"><span>NEW RECORDS</span></span><span className="jp">今大会の新記録</span>
        <span className="sp" /><span className="meta">{NR.items.length}件</span></div>

      <div className="nr-lead">
        今大会で、<b>{teams}大学</b>が自校の<b>大学記録を{NR.items.length}種目</b>で塗り替えました。
        大学記録＝2000年以降のJARA主催6大会（インカレ・全日本・全日本選抜・新人戦・オッ盾・ジャパンオープン）における、その大学の種目別の最速タイムです（記録タブと同じ台帳）。
        インカレの大会記録の更新はありませんでしたが、記録の裾野は確実に速くなっています。
      </div>

      <div className="mtoggle">
        <button type="button" className={sortBy === "gain" ? "on" : ""} onClick={() => setSortBy("gain")}>更新幅の大きい順</button>
        <button type="button" className={sortBy === "ev" ? "on" : ""} onClick={() => setSortBy("ev")}>種目順</button>
      </div>

      <div className="nr-list">
        {items.map((r, i) => (
          <div className="nr-row" key={i}>
            <span className={"nr-ev" + (/^W/.test(r.ev) ? " w" : "")}>{r.ev}</span>
            <span className="nr-body">
              <b className="nr-team">{r.team}</b>
              <i className="nr-old">これまで {r.old}（{r.oldY}年）</i>
            </span>
            <span className="nr-time">
              <b>{r.t}</b>
              <i className="nr-gain">−{r.gain.toFixed(2)}秒</i>
            </span>
          </div>
        ))}
      </div>
      <div className="nr-note">タイムは風・水温などの条件で変わるため、単純な実力差ではありませんが、いずれもその大学の歴代最速として台帳に残る記録です。</div>
    </section>
  );
}

// 大会後のエントリータブ案：種目カードに表彰台（金銀銅＋タイム）を直載せする。
// 「どの種目を誰が勝ったか」はここ、「時系列で振り返る」は日程タブ、と役割を分ける。
function PostEntryDemoView({ onOpenEvent }) {
  const RW = window.RW;
  const podium = (evKey) => {
    const rs = RW.realRaces(evKey) || [];
    const fin = rs.find((r) => r.round === "A決勝" || r.round === "決勝");
    if (!fin) return [];
    return (fin.lanes || []).filter((l) => l.rank != null && l.rank <= 3)
      .sort((a, b) => a.rank - b.rank)
      .map((l) => ({ rank: l.rank, team: l.team, name: l.name, t: l.t2000 }));
  };
  const DIVS = [["intercollege", "インカレ"], ["oxford", "オックスフォード盾"], ["japanopen", "ジャパンオープン"]];
  const MEDAL = ["", "金", "銀", "銅"];
  return (
    <section className="view">
      <div className="shead"><span className="tag"><span>CHAMPIONS</span></span><span className="jp">種目別 最終結果（大会後エントリー案）</span></div>
      <div className="nr-lead">大会後のエントリータブ案です。種目カードに表彰台を直載せし、タップでこれまで通り全結果・名簿へ。「種目から見る」はここ、「時系列で振り返る」は日程タブ、と役割を分けて情報の被りを解消します。</div>
      {DIVS.map(([div, label]) => {
        const evs = RW.EVENTS.filter((e) => e.div === div);
        if (!evs.length) return null;
        return (
          <div key={div}>
            <div className="pe-div">{label}</div>
            <div className="pe-grid">
              {evs.map((ev) => {
                const pd = podium(ev.key);
                return (
                  <div className={"pe-card" + (ev.cat === "w" ? " w" : "")} key={ev.key} onClick={() => onOpenEvent && onOpenEvent(ev.key)}>
                    <div className="pe-hd"><span className="pe-code">{ev.code}</span><span className="pe-name">{ev.name}</span></div>
                    {pd.length ? pd.map((p) => (
                      <div className={"pe-row m" + p.rank} key={p.rank}>
                        <span className="pe-medal">{MEDAL[p.rank]}</span>
                        <span className="pe-team">{p.name && !((RW.isMinorTeam && RW.isMinorTeam(p.team))) ? p.name : p.team}</span>
                        <span className="pe-time">{p.t || ""}</span>
                      </div>
                    )) : <div className="pe-none">結果なし</div>}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </section>
  );
}
Object.assign(window, { NewRecordsView, PostEntryDemoView });

/* ③ 仮想対戦（/demo2）：別々のレースを走ったクルーを同じ水面に並べて再現する。
   とある監督のアイデア「このクルーとこのクルーで戦わせたら？」の試作。
   各クルーは今大会のベストタイムの走り（500mごとの通過つき）を使う。 */
function VsRaceView({ favTeams }) {
  const RW = window.RW;
  const toSec = (t) => { const m = String(t || "").match(/(\d+):([\d.]+)/); return m ? +m[1] * 60 + parseFloat(m[2]) : null; };
  const wpOf = (cum) => { const wp = [{ d: 0, t: 0 }]; for (let i = 0; i < 4; i++) { if (cum[i] != null) wp.push({ d: (i + 1) * 500, t: cum[i] }); } return wp; };
  const [evKey, setEvKey] = React.useState("m8");
  const [sel, setSel] = React.useState({});      // id -> true
  const [goKey, setGoKey] = React.useState(0);   // スタートし直し用
  React.useEffect(() => { setSel({}); }, [evKey]);

  // 種目内の各クルーの「今大会ベストの走り」を作る
  const crews = React.useMemo(() => {
    const best = {};
    (RW.realRaces(evKey) || []).forEach((race) => {
      (race.lanes || []).forEach((l) => {
        const cum = [toSec(l.t500), toSec(l.t1000), toSec(l.t1500), toSec(l.t2000)];
        if (cum[3] == null || !l.team) return;
        const id = String(l.team).replace(/[\s　]/g, "") + "|" + String(l.name || "").replace(/[\s　]/g, "");
        if (!best[id] || cum[3] < best[id].total) {
          const minor = RW.isMinorTeam && RW.isMinorTeam(l.team);
          best[id] = { id, team: l.team, name: (!minor && l.name) || null, from: race.round + (race.grp ? " " + race.grp : ""),
                       cum, total: cum[3], t: l.t2000 };
        }
      });
    });
    return Object.values(best).sort((a, b) => a.total - b.total);
  }, [evKey]);

  const chosen = crews.filter((c) => sel[c.id]);
  const rows = React.useMemo(() => chosen.map((c) => ({
    name: c.name, team: c.team, heat: c.from, round: "仮想対戦", next: null, rank: null, lane: null,
    cum: c.cum, laps: [0, 1, 2, 3].map((i) => (c.cum[i] != null && (i === 0 || c.cum[i - 1] != null)) ? c.cum[i] - (i === 0 ? 0 : c.cum[i - 1]) : null),
    total: c.total, wp: wpOf(c.cum),
  })), [chosen.map((c) => c.id).join(","), goKey]);

  const toggle = (id) => setSel((p) => { const n = { ...p }; if (n[id]) delete n[id]; else if (Object.keys(n).length < 8) n[id] = true; return n; });

  return (
    <section className="view">
      <div className="shead"><span className="tag"><span>VS</span></span><span className="jp">仮想対戦（試作）</span></div>
      <div className="nr-lead">
        別々のレースを走ったクルーを、同じ水面に並べて「もし一緒に漕いだら」を再現します。
        各クルーは<b>今大会でいちばん速かった走り</b>（500mごとの通過つき）を使います。
        風などの条件が違うレース同士なので、実際の着順とは別物の<b>お楽しみ企画</b>です。
      </div>
      <div className="chips entscope">
        {RW.EVENTS.map((e) => (
          <button type="button" key={e.key} className={"chip" + (evKey === e.key ? " on" : "")} onClick={() => setEvKey(e.key)}>{e.code}</button>
        ))}
      </div>
      <div className="vs-pick">
        <div className="vs-pickhd">クルーを選ぶ（2〜8）<span className="vs-n">{chosen.length}艇 選択中</span></div>
        {crews.map((c, i) => (
          <button type="button" key={c.id} className={"vs-crew" + (sel[c.id] ? " on" : "")} onClick={() => toggle(c.id)}>
            <span className="vs-rk">{i + 1}</span>
            <span className="vs-nm">{c.name || c.team}{c.name && <i>{c.team}</i>}</span>
            <span className="vs-from">{c.from}</span>
            <span className="vs-t">{c.t}</span>
          </button>
        ))}
      </div>
      {chosen.length >= 2 ? (
        <div className="rc-inline vswrap" key={"vs" + goKey}>
          <KaralRaceReplay rows={rows} initialRound="仮想対戦" lockRound={true} favTeams={favTeams} />
          <button type="button" className="vs-restart" onClick={() => setGoKey((k) => k + 1)}>最初からもう一度</button>
        </div>
      ) : (
        <div className="empty">上の一覧から2艇以上選ぶと、ここでレースが始まります</div>
      )}
    </section>
  );
}
Object.assign(window, { VsRaceView });