/* events.jsx — 種目一覧（男女が左右に並ぶ2列グリッド）。
   この大会の部門は「全国選抜」の1つだけなので、区切りも1ブロックにしてある。
   男女は「艇種（1×／2×／4×+）」で行を揃えるので、片方しか無い種目があれば空白で分かる。 */

// コンパクト種目カード：種目コード＋種目名／クルー数・乗艇人数。タップで発艇表ビッグカードへ。
function EventMini({ ev, onOpen }) {
  const RW = window.RW;
  const crews = ev.entries.length;
  const heads = crews * RW.seatsOf(ev);   // 艇に乗る人数（舵手を含む）×クルー数
  return (
    <button type="button" className={"evm" + (ev.cat === "w" ? " w" : "")} onClick={() => onOpen(ev.key)}>
      <span className="evm-code">
        <span className="evm-codetxt">{ev.code}</span>
      </span>
      <div className="evm-body">
        <div className="evm-top">
          <span className="evm-nm">{ev.name}</span>
          <IconChevron className="evm-cv" size={16} />
        </div>
        <div className="evm-foot">
          <span className="evm-cnt"><b>{crews}</b> クルー</span>
          <span className="evm-head">{heads}名</span>
        </div>
      </div>
    </button>
  );
}

// 片方の性別だけ実施される種目の「空き枠」。何が無いのかを明示する。
// （第37回は男女とも同じ3種目なので出番は無いが、種目が変わった年にそのまま使えるように残す）
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");
  // 部門は1つだけ。見出しの名前は DIV の先頭（＝全国選抜）から取る。
  const divKey = Object.keys(RW.DIV)[0];
  const divLabel = (RW.DIV[divKey] || {}).label || RW.META.title;
  const list = RW.EVENTS.filter((e) => cat === "all" || e.cat === cat);
  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;
  // 艇種キー（m1x/w1x→1x、m4xc/w4xc→4xc）で男女を突き合わせ、行を揃える
  const cls = (e) => e.key.replace(/^[mw]/, "");

  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>
      {list.length > 0 && (
        <div className="evsec">
          <div className="evsec-h"><span className="evsec-line" /><span className="evsec-lb">{divLabel}</span><span className="evsec-n">{list.length}種目</span></div>
          {twoCol ? (() => {
            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 K = window.KANSAI;
  const meetNo = (window.KANSAI_CONFIG && window.KANSAI_CONFIG.meetNo) || "37";
  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)" }}>
        出典：静岡県ローイング協会 公式結果（{K.META.edition}{K.META.title}）
        {" https://rowing-szo.com/senbatsu/" + meetNo + "/result.htm"}
        <br />
        「◯名」は、艇に乗る人数（舵手を含む）×クルー数で数えた合計です。控えの選手は入っていません。
        ダブルスカル・クォドルプルの乗艇メンバーは、公式が公表していないため掲載しません。
      </p>
    </section>
  );
}
Object.assign(window, { EventsView, EntryView, EventMini, EventDivGrid, FavRegister });