/* events.jsx — 部門ごとに区切った2列グリッドの種目一覧（男女が左右に並ぶ）。
   男女は「艇種（1x/2x/ペア/フォア…）」で行を揃えるので、片方しか無い種目は空白になり
   「何が無いか」が見た目で分かる。 */

// 併催大会の接頭辞（OX＝オックスフォード盾／JO＝ジャパンオープン）は改行して2行で見せる。
// 枠幅52pxに "OXM8+" は入りきらないため。艇種の記号（M8+）は割らない。
function splitCode(code) {
  const m = String(code).match(/^(OX|JO)(.+)$/);
  return m ? [m[1], m[2]] : [String(code)];
}

// 前回大会（2025）の王者。EVENTS.key → 歴代優勝データ（歴史タブと同じ出典）
function defendingOf(evKey) {
  const H = window.KANSAI.HISTORY;
  if (!H) return null;
  // 歴史側の種目コード → 今大会の EVENTS.key
  const MAP = { "M8+": "m8", "M4+": "m4c", "M2X": "m2x", "M1X": "m1x",
    "W4X+": "w4xc", "W2X": "w2x", "W1X": "w1x" };
  const hit = (H.defending || []).find((d) => MAP[d.ev] === evKey);
  if (hit) return { team: H.disp(hit.team), athlete: hit.athlete };
  return null;
}

// コンパクト種目カード：コード＋種目名／クルー数・出場人数。タップで発艇表ビッグカードへ。
function EventMini({ ev, onOpen }) {
  const RW = window.RW;
  const heads = RW.headcount(ev);
  const parts = splitCode(ev.code);
  return (
    <button type="button" className={"evm" + (ev.cat === "w" ? " w" : "")} onClick={() => onOpen(ev.key)}>
      <span className="evm-code">
        <span className={"evm-codetxt" + (parts.length > 1 ? " two" : "")}>
          {parts.length > 1 ? <><i className="evm-pfx">{parts[0]}</i>{parts[1]}</> : parts[0]}
        </span>
      </span>
      <div className="evm-body">
        <div className="evm-top">
          <span className="evm-nm">{ev.name}</span>
          {ev.open && <span className="opchip">OPEN</span>}
          <IconChevron className="evm-cv" size={16} />
        </div>
        <div className="evm-foot">
          <span className="evm-cnt"><b>{ev.entries.length}</b> クルー</span>
          <span className="evm-head">{heads}名</span>
        </div>
      </div>
    </button>
  );
}

// 片方の性別だけ実施される種目の「空き枠」。何が無いのかを明示する（今大会は女子フォアが該当）。
function EventNone({ cat, mate }) {
  // 相方の種目名から「男子○○」→「女子○○」を作る（データに無い種目名を捏造しない範囲で）
  const base = mate ? String(mate.name).replace(/^(男子|女子)/, "") : "";
  const label = (cat === "w" ? "女子" : "男子") + base;
  return (
    <div className={"evm evnone" + (cat === "w" ? " w" : "")} aria-hidden="true">
      <span className="evm-code"><span className="evm-codetxt">—</span></span>
      <div className="evm-body">
        <div className="evm-top"><span className="evm-nm">{label}</span></div>
        <div className="evm-foot"><span className="evnone-t">今大会は実施なし</span></div>
      </div>
    </div>
  );
}

// 部門別・男女2列の種目グリッド（種目タブとホームで共用）。男女フィルタ付き。
function EventDivGrid({ onOpenEvent }) {
  const RW = window.RW;
  const [cat, setCat] = React.useState("all");
  const divOrder = Object.keys(RW.DIV).sort((a, b) => RW.DIV[a].order - RW.DIV[b].order);
  const matches = (e) => (cat === "all" || e.cat === cat);

  return (
    <React.Fragment>
      <div className="chips">
        {[["all", "男女すべて"], ["m", "男子"], ["w", "女子"]].map(([c, l]) => (
          <button key={c} className={"chip" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{l}</button>
        ))}
      </div>
      {divOrder.map((dk) => {
        const list = RW.byDiv(dk).filter(matches);
        if (!list.length) return null;
        const men = list.filter((e) => e.cat === "m");
        const women = list.filter((e) => e.cat === "w");
        // 男女どちらかだけのフィルタ時は1列に詰める。両方ある通常時は左=男子/右=女子の2列。
        const twoCol = cat === "all" && men.length && women.length;
        return (
          <div className="evsec" key={dk}>
            {RW.multiDiv && <div className="evsec-h"><span className="evsec-line" /><span className="evsec-lb">{RW.DIV[dk].label}</span><span className="evsec-n">{list.length}種目</span></div>}
            {twoCol ? (() => {
              // 艇種で男女を突き合わせ、行を揃える。新人戦は M4+ と W4X+（舵手付きクォド）を同じ行にする（data.js の row）
              const cls = (e) => e.row || e.key.replace(/^(ox|jo)?[mw]/, "");
              const order = [];
              list.forEach((e) => { const c = cls(e); if (order.indexOf(c) < 0) order.push(c); });
              const find = (arr, c) => arr.find((e) => cls(e) === c) || null;
              return (
                <div className="evrows">
                  {order.map((c) => {
                    const m = find(men, c), w = find(women, c);
                    return (
                      <div className="evrow" key={c}>
                        {m ? <EventMini ev={m} onOpen={onOpenEvent} /> : <EventNone cat="m" mate={w} />}
                        {w ? <EventMini ev={w} onOpen={onOpenEvent} /> : <EventNone cat="w" mate={m} />}
                      </div>
                    );
                  })}
                </div>
              );
            })() : (
              <div className="evgrid">{list.map((ev) => <EventMini key={ev.key} ev={ev} onOpen={onOpenEvent} />)}</div>
            )}
          </div>
        );
      })}
    </React.Fragment>
  );
}

function EventsView({ ord, onOpenEvent }) {
  const RW = window.RW;
  return (
    <section className="view">
      <div className="shead"><span className="tag"><span>EVENTS</span></span><span className="jp">種目から探す</span><span className="sp" /><span className="meta">{RW.EVENTS.length}種目</span></div>
      <EventDivGrid onOpenEvent={onOpenEvent} />
    </section>
  );
}
// お気に入りチーム登録（エントリータブ先頭）。検索→タップで★を付け外し。
// 登録すると日程タブの★・「お気に入りのみ」やホームのレーダーに反映される。
function FavRegister({ favTeams, toggleFav }) {
  const RW = window.RW;
  const [q, setQ] = React.useState("");
  const favs = Object.keys(favTeams || {}).filter((t) => favTeams[t]);
  const qq = q.trim();
  const yomi = (t) => (window.TEAM_YOMI && window.TEAM_YOMI[t]) || "";
  // 読み比較用：カタカナ→ひらがな、小書き（ゅ等）→大書き（読み表が小書きを使わないため）
  const kanaN = (s) => String(s || "").replace(/[ァ-ヶ]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60))
    .replace(/[ぁぃぅぇぉっゃゅょゎ]/g, (c) => ({ "ぁ": "あ", "ぃ": "い", "ぅ": "う", "ぇ": "え", "ぉ": "お", "っ": "つ", "ゃ": "や", "ゅ": "ゆ", "ょ": "よ", "ゎ": "わ" }[c] || c));
  const hits = qq ? RW.TEAM_NAMES.filter((t) => t.includes(qq) || (kanaN(qq) && yomi(t).includes(kanaN(qq)))).slice(0, 14) : [];
  return (
    <div className="favreg bnr">
      <div className="fb-hd"><Star size={19} color="var(--gold-2)" />推しチームを登録して応援しよう</div>
      <div className="fb-sub">日程・組み合わせ・レース再現に ★ が付いて、追いかけやすくなります</div>
      <div className="search"><IconSearch size={20} /><input value={q} onChange={(e) => setQ(e.target.value)} placeholder="団体名で検索（例：同志社、清風高校、トヨタ…）" autoComplete="off" /></div>
      {hits.length > 0 && (
        <div className="frchips">
          {hits.map((t) => {
            const on = !!favTeams[t];
            return (
              <button type="button" key={t} className={"frchip" + (on ? " on" : "")} onClick={() => toggleFav(t)}>
                <span className="st">{on ? "★" : "☆"}</span>{t}
              </button>
            );
          })}
        </div>
      )}
      {qq && hits.length === 0 && <div className="frnone">「{qq}」に当てはまる団体はありません</div>}
      {favs.length > 0 && (
        <div className="frchips now">
          <span className="frlbl">登録中：</span>
          {favs.map((t) => (
            <button type="button" key={t} className="frchip on" onClick={() => toggleFav(t)} title="タップで解除">
              <span className="st">★</span>{t}<span className="x">×</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// エントリータブ（最初に開く画面）。種目カードから結果・名簿へ入る導線。
function EntryView({ onOpenEvent, favTeams, toggleFav }) {
  const RW = window.RW;
  const K = window.KANSAI;
  return (
    <section className="view">
      <FavRegister favTeams={favTeams || {}} toggleFav={toggleFav || (() => {})} />
      <div className="subhead">
        <IconOar className="ic" size={16} />種目からさがす
        <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--mut)", fontWeight: 700 }}>カードをタップで結果・名簿へ</span>
      </div>
      <EventDivGrid onOpenEvent={onOpenEvent} />
      <p className="evnote" style={{ margin: "14px 4px 0", fontSize: 11, lineHeight: 1.9, color: "var(--mut)" }}>
        出典：JARA公式 エントリー表（{K.META.edition}全日本新人ローイング選手権）。
        「◯名」は艇の定員×クルー数（舵手を含む）。新人戦は<b>1人1種目</b>なので、そのまま出場する選手の人数です。
        予選の組み合わせは10/22（木）18時の抽選で決まります（各組にエルゴ記録上位のシードクルーを1艇ずつ置き、ほかは抽選）。クルーごとの乗艇メンバーは、その発表後に掲載します。高校生を含むクルーは選手名を出さず、チーム名のみ表示します。
      </p>
    </section>
  );
}
Object.assign(window, { EventsView, EntryView, EventMini, EventDivGrid, FavRegister });