/* events.jsx — 部門ごとに区切った2列グリッドの種目一覧（男女が左右に並ぶ） */

// コンパクト種目カード：コード＋種目名／クルー数・出場人数。タップで発艇表ビッグカードへ。
function EventMini({ ev, onOpen }) {
  const RW = window.RW;
  const heads = RW.headcount(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>
          {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>
  );
}

// 部門別・男女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}>
            <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 ? (
              <div className="evcols">
                <div className="evcol">{men.map((ev) => <EventMini key={ev.key} ev={ev} onOpen={onOpenEvent} />)}</div>
                <div className="evcol">{women.map((ev) => <EventMini key={ev.key} ev={ev} onOpen={onOpenEvent} />)}</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>
  );
}
Object.assign(window, { EventsView, EventMini, EventDivGrid });