/* schedule.jsx — day tabs + timetable */
function Row({ r, status, layout, onOpen, fav, hasResult, expanded }) {
  const cls = "row" + (r.isFinalA ? " medal" : "") + (status === "done" ? " done" : "") + (status === "live" ? " live" : "") + (onOpen ? " clk" : "") + (hasResult ? " hasres" : "") + (expanded ? " open" : "");
  return (
    <div className={cls} onClick={onOpen}>
      <div className="time">
        <span className="t">{r.t}</span>
        {layout !== "compact" && r.tEnd !== r.t && <span className="e">–{r.tEnd}</span>}
      </div>
      <div className="ev">
        <div className="l1">
          <Code ev={r.ev} /><DivChip div={r.ev.div} />
          {fav && <span className="row-fav"><Star size={12} color="var(--red)" /></span>}
          {r.isFinalA && <span className="finchip">A決勝</span>}
          {status === "live" && <span className="livetag">LIVE</span>}
        </div>
        {layout !== "compact" && <div className="nm">{r.ev.name}</div>}
      </div>
      <div className="rd">
        <div className="r">{r.round}</div>
        {status === "done" ? (hasResult ? <div className="donetag res">結果</div> : <div className="donetag">終了</div>) : r.grp ? <div className="n">{r.grp}</div> : null}
      </div>
      {onOpen && <span className="row-exp"><IconChevron dir={expanded ? "up" : "down"} size={13} /></span>}
    </div>
  );
}

function ScheduleView({ ord, ttLayout, defaultDay, onOpenRace, onOpenTeam, favTeams, weather }) {
  const RW = window.RW;
  const [day, setDay] = React.useState(defaultDay);
  React.useEffect(() => { setDay(defaultDay); }, [defaultDay]);
  const [favOnly, setFavOnly] = React.useState(false);
  const [openId, setOpenId] = React.useState(null);
  React.useEffect(() => { setOpenId(null); }, [day]);
  const dayHasLive = (k) => RW.FLAT.some((r) => r.day === k && RW.statusOf(r, ord) === "live");
  const dayRows = RW.FLAT.filter((r) => r.day === day);
  const favs = Object.keys(favTeams || {}).filter((t) => favTeams[t]);
  const isFavRace = (r) => favs.length > 0 && r.ev.entries.some((e) => favs.indexOf(RW.baseTeam(e.team)) >= 0);
  const rows = favOnly ? dayRows.filter(isFavRace) : dayRows;

  // 現在時刻ライン：大会中かつ表示中のdayが現在の日の時だけ。
  // 進行中(live)のレースがまだ終わっていないので、そのレースの「上」に線を引く
  // （＝まだ終わっていない最初のレースの上）。前のレースが終わり次の組の時間になると、その組の上へ自動で移動。
  const showNowline = RW.phaseOf(ord) === "during" && day === ("d" + (Math.floor(ord / 1440) + 1));
  const nowIdx = showNowline ? rows.findIndex((r) => RW.statusOf(r, ord) !== "done") : -1;
  const nowRef = React.useRef(null);
  const scrolledDayRef = React.useRef(null);
  React.useEffect(() => {
    if (scrolledDayRef.current === day) return;
    if (nowRef.current) {
      // タブ切替時の window.scrollTo(top:0, smooth)（App の go()）と競合すると
      // スムーススクロールが打ち消し合って現在地までスクロールされないことがあるため instant で確実に合わせる
      nowRef.current.scrollIntoView({ block: "center", behavior: "instant" });
      scrolledDayRef.current = day;
    }
  }, [day]);
  const nowline = <div className="nowline" ref={nowRef}><i /><span>現在 {RW.fmtMin(ord % 1440)}</span><i /></div>;

  return (
    <section className="view">
      <YouTubeLive />
      <div className="shead"><span className="tag"><span>SCHEDULE</span></span><span className="jp">日別タイムテーブル</span></div>
      {/* 日付セレクタ＝1行のデイストリップ（DAY 1→最終日）＋選択中の日の詳細バー。
          日数は RW.DAYS まかせなので3日でも7日でも成立する（入りきらない時だけ横スクロール）。 */}
      <div className="daysel">
        <div className="days" aria-label="開催日">
          {RW.DAYS.map((d, i) => {
            const rs = RW.FLAT.filter((r) => r.day === d.key);
            const fin = rs.filter((r) => r.isFinalA).length;   // その日のA決勝（メダル）の種目数
            const live = dayHasLive(d.key);                    // その日にLIVE中のレースがあるか
            const done = !live && rs.length > 0 && rs.every((r) => RW.statusOf(r, ord) === "done"); // 終わった日
            const on = d.key === day;
            return (
              <button
                key={d.key} type="button" aria-pressed={on}
                className={"day" + (on ? " on" : "") + (done ? " past" : "") + (fin > 0 ? " medal" : "") + (live ? " live" : "")}
                onClick={() => setDay(d.key)}
                ref={on ? (el) => {
                  // 日数が多くて横スクロールになる大会でも、選択中の日が必ず見えるように中央へ寄せる
                  const box = el && el.parentNode;
                  if (!box || box.dataset.cent === d.key) return;
                  box.dataset.cent = d.key;
                  if (box.scrollWidth > box.clientWidth + 4) {
                    box.scrollLeft = el.offsetLeft - (box.clientWidth - el.offsetWidth) / 2;
                  }
                } : null}
              >
                <span className="dnum">{live && <i className="dlive" />}DAY {i + 1}</span>
                <span className="dn">{d.dow}</span>
                <span className="dd">{d.date}</span>
              </button>
            );
          })}
        </div>
        {(() => {
          // 選択中の日の詳細（長いラウンド名をここで受けるので、上のピルが窮屈にならない）
          const d = RW.DAYS.find((x) => x.key === day);
          if (!d) return null;
          const rs = RW.FLAT.filter((r) => r.day === d.key);
          const heats = rs.reduce((s, r) => s + (r.n || 1), 0);  // r.n＝その行の組数（data.jsの"9組"→9）
          const fin = rs.filter((r) => r.isFinalA).length;
          const t0 = d.open || (rs[0] ? rs[0].t : "");                                        // 最初の発艇
          const t1 = d.close || (rs.length ? (rs[rs.length - 1].tEnd || rs[rs.length - 1].t) : ""); // 最後の発艇
          return (
            <div className={"dayinfo" + (fin > 0 ? " medal" : "")}>
              {d.tag && <span className="di-tag">{d.tag}</span>}
              <span className="di-meta">
                {t0 && t1 && <span className="di-time">{t0}–{t1}</span>}
                {heats > 0 && <span className="di-n">全{heats}組</span>}
                {fin > 0 && <span className="di-med">A決勝 {fin}種目</span>}
              </span>
            </div>
          );
        })()}
      </div>
      <div className="legend">
        <span><i style={{ background: "var(--men)" }} />男子</span>
        <span><i style={{ background: "var(--women)" }} />女子</span>
        <span><i style={{ background: "var(--gold-soft)", border: "1px solid var(--gold-line)" }} />A決勝（メダル）</span>
        {favs.length > 0 && <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Star size={11} color="var(--red)" />お気に入りの出場</span>}
        {favs.length > 0 && (
          <button type="button" className={"chip" + (favOnly ? " on" : "")} onClick={() => setFavOnly((v) => !v)}>
            ★ お気に入りのみ
          </button>
        )}
      </div>
      {rows.length === 0 ? (
        <div className="empty">お気に入りチームのレースはこの日にありません</div>
      ) : (
        <div className="tt" data-ttl={ttLayout}>
          {rows.map((r, i) => (
            <React.Fragment key={r.id}>
              {i === nowIdx && nowline}
              <Row r={r} status={RW.statusOf(r, ord)} layout={ttLayout} fav={isFavRace(r)}
                   hasResult={RW.realRacesFor(r).length > 0}
                   expanded={openId === r.id}
                   onOpen={() => setOpenId(openId === r.id ? null : r.id)} />
              {openId === r.id && <RaceInline r={r} favTeams={favTeams} onOpenTeam={onOpenTeam} />}
            </React.Fragment>
          ))}
          {showNowline && nowIdx === -1 && nowline}
        </div>
      )}
      <WeatherCard weather={weather} />
    </section>
  );
}
Object.assign(window, { ScheduleView });
