/* 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 === (Math.floor(ord / 1440) === 0 ? "d1" : "d2");
  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>
      <div className="days">
        {RW.DAYS.map((d) => (
          <button key={d.key} className={"day" + (d.key === day ? " on" : "")} onClick={() => setDay(d.key)}>
            {dayHasLive(d.key) && <span className="liveflag" />}
            <span className="dn">{d.dow}</span><span className="dd">{d.date}</span>
            <span className="dr">{d.key === "d1" ? "予選・敗者戦" : "準決・決勝"}</span>
          </button>
        ))}
      </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 });