/* fav-radar.jsx — 見逃しレーダー：お気に入りチームの「次の発艇」まで常駐カウントダウン。
   どのタブでも上部に出続け、発艇が近づくと赤く脈打つ。タップで発艇表ビッグカードへ。 */
function FavRadar({ ord, phase, favTeams, onOpenRace }) {
  const RW = window.RW;
  const [hidden, setHidden] = React.useState(() => {
    try { return sessionStorage.getItem("kansai_radar_hide") || ""; } catch (e) { return ""; }
  });
  if (phase === "after") return null;
  const favs = Object.keys(favTeams).filter((t) => favTeams[t]);
  if (!favs.length) return null;

  const isFavRace = (r) => r.ev.entries.some((e) => favs.indexOf(RW.baseTeam(e.team)) >= 0);
  const upcoming = RW.FLAT.filter((r) => r.ord > ord && isFavRace(r));
  const nextR = upcoming[0];
  if (!nextR || hidden === nextR.id) return null;

  const teams = favs.filter((t) => nextR.ev.entries.some((e) => RW.baseTeam(e.team) === t));
  const more = upcoming.filter((r) => r !== nextR && r.ord - nextR.ord <= 40).length;
  const mins = nextR.ord - ord;
  const soon = mins <= 20;                       // デモ時計の刻み（約19分/段）でも観測できる閾値
  const dismiss = (e) => {
    e.stopPropagation();
    try { sessionStorage.setItem("kansai_radar_hide", nextR.id); } catch (e2) {}
    setHidden(nextR.id);
  };
  return (
    <div className={"favradar" + (soon ? " soon" : "")} onClick={() => onOpenRace(nextR.id)}
         role="button" aria-label="お気に入りの次のレース">
      <Star size={14} color="var(--red)" />
      <span className="fr-team">{teams.join("・")}</span>
      <Code ev={nextR.ev} />
      <span className="fr-round">{nextR.round}</span>
      {more > 0 && <span className="fr-more">+{more}件</span>}
      <span className="fr-eta">{soon ? "あと" + mins + "分" : nextR.dow + " " + nextR.t}</span>
      <button type="button" className="fr-x" aria-label="このレースの通知を消す" onClick={dismiss}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
      </button>
    </div>
  );
}
Object.assign(window, { FavRadar });