/* rules.jsx — はじめての観戦ガイド（全国高校選抜）
   ボートを初めて見る人（選手の家族・学校の友だち）に向けたページ。
   大会の形・種目・勝ち上がり方・タイムの読み方・見どころだけを置く。
   ─────────────────────────────────────────────────────────
   ★書いてよいのは「公式に出ている大会の事実」と「競技の一般的な説明」だけ。
     航行ルール・審判規則はこの大会のものを確認できていないので載せない。
     歴代優勝は「栄冠」タブ（champions.jsx）に分けてある。
   出典：静岡県ローイング協会 公式結果 https://rowing-szo.com/senbatsu/37/result.htm */

const SZO_RESULT_URL = "https://rowing-szo.com/senbatsu/37/result.htm";

// 日付は data.js の META.days を使う（ラウンド名はサイト内の言い方に合わせて自前で持つ）
const GUIDE_DAYS_FALLBACK = [
  { date: "3/20", dow: "金" },
  { date: "3/21", dow: "土" },
  { date: "3/22", dow: "日" },
];
const DAY_ROUNDS = ["予選", "敗者戦・準決", "順位決定・決勝"];

// 艇の種類（この大会は3種類×男女＝6種目）
const BOAT_TYPES = [
  { code: "M1×・W1×", jp: "シングルスカル", who: "1人で漕ぐ" },
  { code: "M2×・W2×", jp: "ダブルスカル", who: "2人で漕ぐ" },
  { code: "M4×+・W4×+", jp: "舵手つきクォドルプル", who: "漕ぎ手4人＋舵手（コックス）1人の5人乗り" },
];

// 進み方フロー（予選→敗者戦→準決→B決勝/A決勝）。配色はteams.jsxの.tsc-r系（heat/cr/semi/bfinal/afinal）に合わせる
const GUIDE_FLOW = [
  { kind: "heat", label: "予選", desc: "1日目。4組×6艇。各組の上位3艇が準決へ。4位以下は敗者戦にまわる" },
  { kind: "cr", label: "敗者戦", desc: "2日目。2組。上位3艇が準決へ。ここで残れないとこの大会は終わり" },
  { kind: "semi", label: "準決", desc: "2日目。3組×6艇。上位2艇が決勝へ、3・4位は順位決定へ" },
  { kind: "bfinal", label: "順位決定", desc: "3日目。7〜12位を決めるレース" },
  { kind: "afinal", label: "決勝", desc: "3日目。1〜6位を決めるレース" },
];

// 簡易ボート図（艇種の解説専用。名簿は使わず、シート数と位置だけを図示する）
function BoatDiagram({ code, label }) {
  const hasCox = code.indexOf("+") >= 0;
  const n = code.indexOf("8") >= 0 ? 8 : code.indexOf("4") >= 0 ? 4 : code.indexOf("2") >= 0 ? 2 : 1;
  const seats = (hasCox ? ["C"] : []).concat(Array.from({ length: n }, (_, i) => i === 0 ? "S" : (i === n - 1 ? "B" : String(n - i))));
  const CY = 30;
  // 少人数艇は実艇に合わせて中央寄せ（1×=真ん中、2×=中央付近に2つ）。それ以外は全長に分散
  let xs;
  if (seats.length === 1) xs = [100];
  else if (seats.length === 2 && !hasCox) xs = [78, 122];
  else { const x0 = hasCox ? 26 : 34, x1 = 176, step = (x1 - x0) / (seats.length - 1); xs = seats.map((_, i) => x0 + i * step); }
  return (
    <div className="boatdiagram">
      <svg viewBox="0 0 200 60" width="100%" aria-hidden="true">
        <path d={`M8 ${CY} C 34 ${CY - 9}, 168 ${CY - 9}, 192 ${CY} C 168 ${CY + 9}, 34 ${CY + 9}, 8 ${CY} Z`}
              fill="var(--surface-2)" stroke="var(--line)" strokeWidth="1.2" />
        {seats.map((s, i) => {
          const x = xs[i];
          return (
            <g key={i}>
              <circle cx={x} cy={CY} r="9" fill={s === "C" ? "var(--navy)" : "var(--surface)"}
                      stroke="var(--line)" strokeWidth="1.2" />
              <text x={x} y={CY + 3} textAnchor="middle" fontFamily="var(--cond)" fontWeight="800" fontSize="8"
                    fill={s === "C" ? "#fff" : "var(--ink)"}>{s}</text>
            </g>
          );
        })}
      </svg>
      <div className="boatdiagram-lbl">{label}</div>
    </div>
  );
}

function RulesView() {
  const META = (window.KANSAI && window.KANSAI.META) || {};
  const days = (META.days && META.days.length === 3) ? META.days : GUIDE_DAYS_FALLBACK;
  const venue = META.venue || "浜松市天竜ボート場";
  const venueSub = META.venueSub || "天竜川（静岡・浜松市天竜区）";
  const edition = META.edition || "第37回";
  const mapsUrl = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(venue);

  return (
    <section className="view">
      <div className="shead"><span className="tag"><span>GUIDE</span></span><span className="jp">はじめての観戦ガイド</span></div>

      <div className="navsec">
        <div className="navsec-h">① どんな大会？</div>
        <div className="navcard">
          <div className="navcard-t">全国高等学校選抜ローイング大会（{edition}）</div>
          <ul className="navlist">
            <li>都道府県ごとの予選を勝ち抜いた高校が、全国から集まる大会です。</li>
            <li>出場は91校・36都道府県。6つの種目に24クルーずつが出ます。</li>
            <li>3日間で全66レース。会場は{venue}、{venueSub}です。</li>
          </ul>
          <ul className="navlist" style={{ marginTop: 10 }}>
            {days.map((d, i) => (
              <li key={d.key || i}><b>{i + 1}日目</b>　{d.date}（{d.dow}）　{DAY_ROUNDS[i]}</li>
            ))}
          </ul>
        </div>
      </div>

      <div className="navsec">
        <div className="navsec-h">② 6つの種目</div>
        <div className="navcard">
          <div className="navcard-t">男子（M）と女子（W）に、同じ3種類の艇があります</div>
          <ul className="navlist">
            {BOAT_TYPES.map((b) => (
              <li key={b.code}><b>{b.code}</b>　{b.jp} … {b.who}</li>
            ))}
          </ul>
        </div>

        <div className="navcard" style={{ marginTop: 10 }}>
          <div className="navcard-t">種目の記号の読み方</div>
          <ul className="navlist">
            <li><b>M</b> / <b>W</b> ＝ 男子 / 女子</li>
            <li>数字（1・2・4）＝ 漕ぎ手の人数</li>
            <li><b>×</b>（スカル）＝ 両手に1本ずつ、合わせて2本のオールを持つ漕ぎ方</li>
            <li><b>+</b> ＝ 舵手（コックス）が乗る</li>
          </ul>
          <p className="navsrc" style={{ margin: "8px 2px 0" }}>
            例：W4×+ ＝ 女子・漕ぎ手4人・スカル・舵手つき（女子舵手つきクォドルプル）。
            この大会は6種目とも「×」のスカルです。片手で1本だけオールを持つ「スイープ」という漕ぎ方もありますが、この大会にはありません。
          </p>
        </div>

        <div className="boatdiagram-row">
          <BoatDiagram code="M1x" label="1×（シングルスカル・1人）" />
          <BoatDiagram code="M2x" label="2×（ダブルスカル・2人）" />
        </div>
        <div className="boatdiagram-row" style={{ gridTemplateColumns: "1fr" }}>
          <BoatDiagram code="M4x+" label="4×+（舵手つきクォドルプル・漕ぎ手4人＋舵手1人）" />
        </div>
        <p className="navsrc">
          図の丸は座る位置。S＝一番後ろでペースをつくる漕ぎ手、B＝艇の先頭側の漕ぎ手、C＝舵手。
          漕ぎ手は進む方向に背を向けて座るので、前を見て舵を取り、声をかけるのが舵手の役目です。
        </p>
      </div>

      <div className="navsec">
        <div className="navsec-h">③ 勝ち上がり方<span className="navsec-note">6種目とも同じ</span></div>
        <div className="guideflow">
          {GUIDE_FLOW.map((s, i) => (
            <React.Fragment key={s.kind}>
              {i > 0 && <div className="guideflow-arrow">↓</div>}
              <div className={"guideflow-step " + s.kind}>
                <b>{s.label}</b>
                <span>{s.desc}</span>
              </div>
            </React.Fragment>
          ))}
        </div>
        <div className="navcard" style={{ marginTop: 10 }}>
          <ul className="navlist">
            <li>24クルーのうち、準決に進めるのは18艇（予選から12艇＋敗者戦から6艇）。</li>
            <li>3日目に残るのは12艇。上の6艇が決勝、下の6艇が順位決定です。</li>
            <li>予選で4位以下でも、敗者戦で3位までに入れば準決に戻れます。負けても一度チャンスがあります。</li>
            <li>この大会に準々決勝はありません。</li>
          </ul>
        </div>
      </div>

      <div className="navsec">
        <div className="navsec-h">④ タイムの読み方</div>
        <div className="navcard">
          <ul className="navlist">
            <li>コースは<b>2000m</b>。結果には500m・1000m・1500m・2000mの<b>通過タイム</b>が並びます。</li>
            <li>通過タイムを順に見ると、どこで前に出て、どこで抜かれたのかが分かります。</li>
            <li>500mごとの区切りで比べると、前半に飛ばしすぎた艇は後半のタイムが落ちていきます。</li>
            <li><b>風でタイムは変わります。</b>追い風の日は速く、向かい風の日は遅くなります。日が違うレースのタイムは、そのままでは比べられません。</li>
            <li>比べるなら<b>同じレースの中の差</b>。「何秒差で勝ったか」で見るのが確かです。</li>
          </ul>
        </div>
      </div>

      <div className="navsec">
        <div className="navsec-h">⑤ 観戦のコツ</div>
        <div className="navgrid">
          <div className="navcard">
            <div className="navcard-t">レースの流れ（2000m）</div>
            <ul className="navlist">
              <li><b>スタート〜500m</b>：全艇がいっせいに飛び出す。この区間だけ手数が多く、艇にスピードを乗せる。</li>
              <li><b>500〜1500m</b>：ペースを保って我慢する区間。差はここで少しずつ動く。</li>
              <li><b>ラスト500m</b>：スパート。順位が入れ替わりやすい、一番の見どころ。</li>
            </ul>
          </div>
          <div className="navcard race">
            <div className="navcard-t">ここを見ると面白い</div>
            <ul className="navlist">
              <li><b>1000m地点の位置取り</b>：先頭に立った艇がそのまま押し切るのか、後ろが差を詰めるのか。最初の分かれ目です。</li>
              <li><b>ラストの伸び</b>：残り250mでどの艇が伸びるか。艇1杯ぶんの差なら、最後まで分かりません。</li>
              <li><b>舵手つきクォドルプル</b>：4人のオールがそろうと艇がぐっと伸びます。舵手の声にも注目。</li>
              <li><b>予選と決勝でタイムが違うのは普通</b>：風も違えば、狙う順位も違うからです。</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="navsec">
        <div className="navsec-h">⑥ 会場・持ち物</div>
        <div className="navcard">
          <p style={{ margin: "0 0 2px", fontSize: 12.5, fontWeight: 700, color: "var(--ink)" }}>{venue}</p>
          <p className="navsrc" style={{ margin: "0 2px 9px" }}>{venueSub}</p>
          <a className="guide-mapbtn" href={mapsUrl} target="_blank" rel="noopener noreferrer">
            地図アプリで開く ↗
          </a>
          <p className="navsrc" style={{ margin: "8px 2px 0" }}>アクセス・駐車場・観戦できる場所は、主催者の公式案内をご確認ください。</p>
          <ul className="navlist" style={{ marginTop: 10 }}>
            <li>3月の川沿いは風が冷たいので、上に羽織るものを1枚</li>
            <li>飲み物</li>
            <li>双眼鏡があると、遠いレーンの艇も見分けやすい</li>
          </ul>
        </div>
      </div>

      <p className="navsrc">
        日程・レース結果の出典：静岡県ローイング協会 公式結果（
        <a href={SZO_RESULT_URL} target="_blank" rel="noopener noreferrer">{SZO_RESULT_URL}</a>
        ）。このページは非公式の観戦ガイドです。
      </p>
    </section>
  );
}
Object.assign(window, { RulesView });