---
// 小平市の公園・周辺の公園・公共施設の一覧（/kodaira-data/parks/）を表示する。
// データは src/data/parks-rows.ts で組み立てる。
// DOM を抑えるため、設備は1セルにまとめ、アイコンは CSS の擬似要素で描く。
// 絞り込み・並べ替え・カード表示は利用者の端末で実行する。
import { parks, mappedNames, type Park } from "@/data/parks-rows";

const EMPTY = "—";

// 種別の表示（色付きの丸＋区分名。正式名は title / aria-label で補う）。
const TYPE_LABEL: Record<string, string> = {
  街区: "街区公園",
  近隣: "近隣公園",
  運動: "運動公園",
  広域: "広域公園",
  広場: "広場",
  緑地: "緑地",
  団地内公園: "団地内公園",
  児童遊園: "児童遊園",
  市外: "市外の近隣公園",
  地域センター: "地域センター",
  公民館: "公民館",
  児童館: "児童館",
  図書館: "図書館",
  市役所支所: "市役所支所",
  文化施設: "文化施設",
};
const TYPE_CLASS: Record<string, string> = {
  街区: "parks-type--block",
  近隣: "parks-type--neighbor",
  運動: "parks-type--sports",
  広域: "parks-type--wide",
  広場: "parks-type--open",
  緑地: "parks-type--green",
  団地内公園: "parks-type--danchi",
  児童遊園: "parks-type--jidou",
  市外: "parks-type--green",
  地域センター: "parks-type--facility",
  公民館: "parks-type--facility",
  児童館: "parks-type--facility",
  図書館: "parks-type--facility",
  市役所支所: "parks-type--facility",
  文化施設: "parks-type--facility",
};
// 種別は列幅を小さくするため、漢字1文字の記号で表示する。
const TYPE_MARK: Record<string, string> = {
  街区: "街",
  近隣: "近",
  運動: "運",
  広域: "広",
  広場: "場",
  緑地: "緑",
  団地内公園: "団",
  児童遊園: "児",
  市外: "外",
  地域センター: "📍",
  公民館: "🏛",
  児童館: "🧒",
  図書館: "📚",
  市役所支所: "🏢",
  文化施設: "🎭",
};

// 市立以外の公園に付けるバッジ（設置者が空欄なら市立として扱う）。
function ownerLabel(owner: string): string {
  if (owner.includes("都営")) return "都営";
  if (owner === "東京都") return "都立";
  if (owner.includes("UR")) return "UR";
  if (owner.includes("民間")) return "民間";
  return owner;
}
function ownerClass(owner: string): string {
  if (owner.includes("都営")) return "parks-owner--toei";
  if (owner === "東京都") return "parks-owner--tokyo";
  if (owner === "未確認") return "parks-owner--unknown";
  return "parks-owner--other";
}

// 設備バッジ（アイコンは CSS の ::before で描く）。
type Badge = { kind: string; label: string; title: string };
function facilityBadges(p: Park): Badge[] {
  const badges: Badge[] = [];
  if (p["トイレ"]) {
    badges.push({ kind: "toilet", label: "トイレ", title: `トイレ: ${p["トイレ"]}` });
  }
  if (p["水飲み場"]) {
    badges.push({ kind: "water", label: "水飲み場", title: `水飲み場: ${p["水飲み場"]}` });
  }
  if (p["給水"]) {
    badges.push({ kind: "water", label: "給水", title: `給水: ${p["給水"]}` });
  }
  if (p["遊具"]) {
    badges.push({ kind: "toy", label: "遊具", title: `遊具: ${p["遊具"]}` });
  }
  const ball = p["ボール遊び"];
  if (ball && ball !== "禁止") {
    const label = ball.includes("一部") ? "ボール遊び一部可" : "ボール遊び可";
    badges.push({ kind: "ball", label, title: `ボール遊び: ${ball}` });
  }
  if (p["南西部指定管理"]) {
    badges.push({ kind: "cm", label: "指定管理", title: "南西部地域の指定管理公園" });
  }
  return badges;
}

// 設備フィルタ用のトークン（data-fac）。
function facTokens(p: Park): string {
  const tokens: string[] = [];
  if (p["トイレ"]) tokens.push("toilet");
  if (p["水飲み場"]) tokens.push("water");
  if (p["給水"]) tokens.push("water");
  if (p["遊具"]) tokens.push("toy");
  const play = p["遊具"] || "";
  if (play.includes("砂場")) tokens.push("sand");
  if (play.includes("ブランコ")) tokens.push("swing");
  if (play.includes("シーソー")) tokens.push("seesaw");
  if (play.includes("スプリング")) tokens.push("spring");
  if (play.includes("ジャングル")) tokens.push("jungle");
  if (play.includes("ヒコーキ") || play.includes("飛行機")) tokens.push("plane");
  if (play.includes("滑り台") || play.includes("滑台")) tokens.push("slide");
  if (play.includes("複合遊具")) tokens.push("complex");
  if (play.includes("ロープウェイ")) tokens.push("rope");
  const ball = p["ボール遊び"];
  if (ball && ball !== "禁止") tokens.push("ball");
  const clock = (p["時計"] || "").trim();
  if (clock === "○" || clock === "あり" || clock === "有") tokens.push("clock");
  if (p["南西部指定管理"]) tokens.push("cm");
  // ピクニック広場・芝生広場・テーブルのある公園。
  const picnicText = `${p["公園名"] || ""} ${p["種別"] || ""} ${p["その他設備"] || ""} ${p["備考"] || ""}`;
  if (
    (p["テーブル"] || "").trim() ||
    p["種別"] === "広場" ||
    picnicText.includes("芝生") ||
    picnicText.includes("ピクニック") ||
    picnicText.includes("広場")
  ) {
    tokens.push("picnic");
  }
  return tokens.join(" ");
}

// 設備セルの補足テキスト（バッジで示した項目の詳細と、その他の項目）。
// ラベル文字は使わず、アイコンで項目を示す。
const DETAIL_FIELDS: { key: string; icon: string }[] = [
  { key: "ベンチ・椅子", icon: "🪑" },
  { key: "テーブル", icon: "🍽" },
  { key: "シェルター等", icon: "⛱" },
  { key: "防災用具", icon: "🧯" },
  { key: "遊具", icon: "🎠" },
  { key: "時計", icon: "⏰" },
  { key: "駐車場", icon: "🅿" },
  { key: "その他設備", icon: "🔧" },
  { key: "備考", icon: "" },
];
function detailText(p: Park): string {
  const parts: string[] = [];
  for (const { key, icon } of DETAIL_FIELDS) {
    const value = p[key];
    if (!value) continue;
    parts.push(icon ? `${icon} ${value}` : value);
  }
  const ball = p["ボール遊び"];
  if (ball && ball !== "禁止" && ball !== "可") parts.push(`⚽ ${ball}`);
  return parts.join(" / ");
}

// 面積（数値）
function areaNumber(value: string): number {
  const n = Number(value);
  return Number.isFinite(n) ? n : 0;
}
function areaText(value: string): string {
  const n = areaNumber(value);
  return n ? n.toLocaleString("ja-JP") : value;
}
// 面積の目安（小・中・大）。しきい値はページの注記に合わせる。
function sizeLabel(area: number): string {
  if (area < 1000) return "小";
  if (area < 10000) return "中";
  return "大";
}
function sizeTitle(area: number): string {
  if (area < 1000) return "目安: 1,000㎡未満（小さめ）";
  if (area < 10000) return "目安: 1,000〜10,000㎡（ふつう）";
  return "目安: 10,000㎡以上（広め）";
}

// 公園名で検索する。公園名だけだと別の自治体の同名公園に飛ぶので「小平市」を必ず付ける。
// 公園名がない場合だけ住所、それもなければ座標を使う。
function mapsUrl(p: Park): string {
  if (p["地図URL"]) return p["地図URL"];
  const name = (p["公園名"] || "").trim();
  const query = name
    ? `小平市${name}`
    : p["住所"]
      ? `小平市${p["住所"]}`
      : `${p["緯度"]},${p["経度"]}`;
  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
}

// 検索対象（公園名・住所・町名・種別・設備・備考）。
function searchIndex(p: Park): string {
  return [
    p["公園名"],
    p["住所"],
    p["町名"],
    p["種別"],
    TYPE_LABEL[p["種別"]],
    p["設置者"],
    p["状態"],
    p["トイレ"],
    p["水飲み場"],
    p["給水"],
    p["ボール遊び"],
    ...DETAIL_FIELDS.map((f) => p[f.key]),
  ]
    .join(" ")
    .toLowerCase();
}
---

<div class="parks" data-parks>
  <p class="parks-none" data-parks-none hidden>条件に合う公園・施設が見つかりませんでした。</p>

  <div class="parks-scroll">
    <table>
      <colgroup>
        <col class="col-name" />
        <col class="col-address" />
        <col class="col-area" />
        <col class="col-type" />
        <col class="col-facility" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col" aria-sort="none">
            <button type="button" class="parks-sort" data-sort="name">
              名称<span class="parks-sort-mark" aria-hidden="true"></span>
            </button>
          </th>
          <th scope="col">住所</th>
          <th scope="col" aria-sort="none">
            <button type="button" class="parks-sort" data-sort="area">
              面積（㎡）<span class="parks-sort-mark" aria-hidden="true"></span>
            </button>
          </th>
          <th scope="col">種別</th>
          <th scope="col">施設・備考</th>
        </tr>
      </thead>
      <tbody>
        {parks.map((park) => (
          <tr
            data-kind={park["施設"] === "1" ? park["種別"] : "park"}
            data-town={park["町名"]}
            data-area={park["面積㎡"]}
            data-name={park["公園名"]}
            data-fac={facTokens(park)}
            data-search={searchIndex(park)}
          >
            <td class="is-name" data-label="名称">
              {mappedNames.has(park["公園名"]) ? (
                <button
                  type="button"
                  class="park-name-link"
                  data-focus-park={park["公園名"]}
                  data-focus-key={park["地図キー"] || ""}
                  title="地図でこの公園の位置を表示"
                >{park["公園名"]}</button>
              ) : park["公式URL"] ? (
                <a
                  class="park-name-link"
                  href={park["公式URL"]}
                  target="_blank"
                  rel="noopener"
                  title="公式ページを開く"
                >{park["公園名"]}</a>
              ) : (
                park["公園名"]
              )}
              {park["状態"] === "閉鎖" ? (
                <span class="parks-status" title="閉鎖中">閉鎖</span>
              ) : null}
              {park["設置者"] && park["設置者"] !== "小平市" ? (
                <span
                  class:list={["parks-owner", ownerClass(park["設置者"])]}
                  title={`設置者: ${park["設置者"]}`}
                >{ownerLabel(park["設置者"])}</span>
              ) : null}
            </td>
            <td class="is-address" data-label="住所">
              <a
                href={mapsUrl(park)}
                target="_blank"
                rel="noopener"
                title={`Googleマップで「${park["公園名"]}」を開く`}
              >{park["住所"] || EMPTY}</a>
            </td>
            <td
              class="is-num"
              data-label="面積"
              data-size={park["面積㎡"] ? sizeLabel(areaNumber(park["面積㎡"])) : ""}
              title={park["面積㎡"] ? sizeTitle(areaNumber(park["面積㎡"])) : ""}
            >
              {park["面積㎡"] ? `${areaText(park["面積㎡"])}㎡` : EMPTY}
            </td>
            <td class="is-type" data-label="種別">
              {park["種別"] ? (
                <span
                  class:list={["parks-type", TYPE_CLASS[park["種別"]]]}
                  title={TYPE_LABEL[park["種別"]]}
                  aria-label={TYPE_LABEL[park["種別"]]}
                >
                  <span aria-hidden="true">{TYPE_MARK[park["種別"]] || park["種別"].slice(0, 1)}</span>
                </span>
              ) : (
                EMPTY
              )}
            </td>
            <td class="is-facility" data-label="施設・備考">
              {facilityBadges(park).map((b) => (
                <span class:list={["fac-badge", `fac-${b.kind}`]} title={b.title} aria-label={b.title}></span>
              ))}
              {detailText(park) ? <span class="fac-detail">{detailText(park)}</span> : null}
              {facilityBadges(park).length === 0 && !detailText(park) ? EMPTY : null}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

<style>
  .parks-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    margin: 1rem 0 0.4rem;
  }
  .parks-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
  }
  .parks-controls select,
  .parks-controls input[type="search"] {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--sl-color-hairline, #ccc);
    border-radius: 0.3rem;
    background: var(--sl-color-bg, #fff);
    color: var(--sl-color-text, inherit);
    font: inherit;
  }
  .parks-facilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    align-items: center;
    margin: 0;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--sl-color-hairline, #ccc);
    border-radius: 0.3rem;
  }
  .parks-facilities legend {
    padding: 0 0.2rem;
    font-size: 0.8em;
    color: inherit;
    opacity: 0.7;
  }
  .parks-facilities label {
    font-size: 0.85rem;
  }
  .parks-count {
    margin-left: auto;
    font-size: 0.9rem;
    opacity: 0.75;
  }
  .parks-hint,
  .parks-none {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    opacity: 0.75;
  }
  .parks-none {
    padding: 0.6rem;
    border: 1px dashed var(--sl-color-hairline, #ccc);
    border-radius: 0.3rem;
    opacity: 1;
  }
  .parks-scroll {
    max-height: 70vh;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sl-color-hairline, #ddd);
    border-radius: 0.3rem;
  }
  .parks table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .parks col.col-name {
    width: 24%;
  }
  .parks col.col-address {
    width: 18%;
  }
  .parks col.col-area {
    width: 11%;
  }
  .parks col.col-type {
    width: 7%;
  }
  .parks col.col-facility {
    width: 40%;
  }
  .parks th,
  .parks td {
    border-bottom: 1px solid var(--sl-color-hairline, #ddd);
    border-right: 1px solid var(--sl-color-hairline, #ddd);
    padding: 0.35rem 0.55rem;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
  }
  .parks th:last-child,
  .parks td:last-child {
    border-right: none;
  }
  .parks thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sl-color-gray-6, #f2f2f2);
    color: var(--sl-color-white, inherit);
  }
  .parks tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--sl-color-text, #333) 5%, transparent);
  }
  .parks tr.is-hidden {
    display: none;
  }
  .parks-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .parks-sort:hover .parks-sort-mark {
    color: var(--sl-color-text-accent, #4c8);
  }
  .parks-sort-mark {
    display: inline-block;
    min-width: 1em;
    text-align: center;
  }
  .parks .is-name {
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  .parks-owner {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 0.08em;
    white-space: nowrap;
  }
  .parks-owner--tokyo {
    color: #2e7d32;
  }
  .parks-owner--toei {
    color: #1565c0;
  }
  .parks-owner--other {
    color: #6d4c41;
  }
  .parks-owner--unknown {
    color: #757575;
  }
  .parks-status {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.35rem;
    border: 1px solid #ef9a9a;
    border-radius: 999px;
    background: #ffebee;
    color: #b71c1c;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 0.08em;
    white-space: nowrap;
  }
  .park-name-link {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--sl-color-gray-4);
    text-underline-offset: 2px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .park-name-link:hover {
    color: var(--sl-color-accent);
  }
  .parks tbody tr.is-highlighted td {
    background: #fff59d !important;
  }
  .parks .is-address {
    font-size: 0.8em;
    white-space: normal;
    min-width: 9rem;
  }
  .parks .is-address a {
    color: var(--sl-color-text-accent, #357);
  }
  .parks .is-address a::before {
    content: "📍";
    margin-right: 0.2em;
  }
  .parks .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .parks .is-num::after {
    content: attr(data-size);
    display: inline-block;
    margin-left: 0.4em;
    padding: 0 0.45em;
    border-radius: 0.7em;
    font-size: 0.75em;
    line-height: 1.7;
    vertical-align: middle;
    background: color-mix(in srgb, currentColor 14%, transparent);
  }
  .parks .is-num[data-size="中"]::after {
    background: color-mix(in srgb, #2e9e4f 22%, transparent);
  }
  .parks .is-num[data-size="大"]::after {
    background: color-mix(in srgb, #2f7fe0 24%, transparent);
  }
  .parks .is-type {
    text-align: center;
  }
  .parks-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.35em;
    background: color-mix(in srgb, var(--type-color, #888) 18%, transparent);
    color: var(--type-color, #888);
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
  }
  .parks-type--block {
    --type-color: #2e9e4f;
  }
  .parks-type--neighbor {
    --type-color: #2f7fe0;
  }
  .parks-type--sports {
    --type-color: #e8862a;
  }
  .parks-type--wide {
    --type-color: #7b1fa2;
  }
  .parks-type--open {
    --type-color: #8d6e63;
  }
  .parks-type--green {
    --type-color: #43a047;
  }
  .parks-type--danchi {
    --type-color: #546e7a;
  }
  .parks-type--jidou {
    --type-color: #d81b60;
  }
  .parks-type--facility {
    --type-color: #00838f;
    font-size: 1em;
  }
  .parks .is-facility {
    white-space: normal;
    min-width: 12rem;
    max-width: 26rem;
  }
  .parks .fac-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.3em 0.2em 0;
    padding: 0 0.4em;
    border-radius: 1em;
    font-size: 0.85em;
    line-height: 1.9;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 10%, transparent);
    cursor: help;
  }
  .parks .fac-toilet::before {
    content: "🚻";
  }
  .parks .fac-water::before {
    content: "🚰";
  }
  .parks .fac-toy::before {
    content: "🎠";
  }
  .parks .fac-ball::before {
    content: "⚽";
  }
  .parks .fac-cm::before {
    content: "🏛";
  }
  .parks .fac-pergola::before {
    content: "🌿";
  }
  .parks .fac-azumaya::before {
    content: "🛖";
  }
  .parks .fac-detail {
    display: block;
    margin-top: 0.25em;
    font-size: 0.8em;
    opacity: 0.85;
  }

  /* スマートフォンでも表形式を維持し、横スクロールで見られるようにする。 */
  @media (max-width: 640px) {
    .parks table {
      font-size: 0.75rem;
    }
    .parks th,
    .parks td {
      padding: 0.3rem 0.4rem;
    }
  }
</style>

<script>
  document.querySelectorAll("[data-parks]").forEach((root) => {
    const select = document.querySelector<HTMLSelectElement>("[data-parks-town]");
    const kindSelect = document.querySelector<HTMLSelectElement>("[data-parks-kind]");
    const search = document.querySelector<HTMLInputElement>("[data-parks-search]");
    const count = document.querySelector("[data-parks-count]");
    const none = root.querySelector<HTMLElement>("[data-parks-none]");
    const tbody = root.querySelector("tbody");
    const checks = Array.from(
      document.querySelectorAll<HTMLInputElement>("[data-fac-filter]"),
    );
    const sortButtons = Array.from(root.querySelectorAll<HTMLButtonElement>("[data-sort]"));
    if (!tbody) return;

    root.querySelectorAll<HTMLButtonElement>("[data-focus-park]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const name = btn.dataset.focusPark;
        if (!name) return;
        document.dispatchEvent(
          new CustomEvent("park:focus", {
            detail: { name, key: btn.dataset.focusKey || "" },
          }),
        );
      });
    });

    const allRows = () => Array.from(tbody.querySelectorAll<HTMLTableRowElement>("tr"));
    const total = allRows().length;

    let sortKey: string | null = null;
    let sortDir = 1;
    let selectedName = "";

    const applyFilter = () => {
      const kind = kindSelect ? kindSelect.value : "";
      const town = select ? select.value : "";
      const query = search ? search.value.trim().toLowerCase() : "";
      const wanted = checks.filter((c) => c.checked).map((c) => c.value);
      let shown = 0;
      allRows().forEach((row) => {
        const facs = (row.dataset.fac || "").split(" ");
        const okKind = !kind || row.dataset.kind === kind;
        const okTown = !town || row.dataset.town === town;
        const okText = !query || (row.dataset.search || "").includes(query);
        const okFac = wanted.every((token) => facs.includes(token));
        const okSelected = !selectedName || row.dataset.name === selectedName;
        const ok = okKind && okTown && okText && okFac && okSelected;
        row.classList.toggle("is-hidden", !ok);
        if (ok) shown += 1;
      });
      if (count) count.textContent = `${shown} / ${total}件`;
      if (none) none.hidden = shown !== 0;
      // 地図側に絞り込み結果を通知する。
      const visibleNames = allRows()
        .filter((row) => !row.classList.contains("is-hidden"))
        .map((row) => row.dataset.name || "")
        .filter(Boolean);
      const fromMap = Boolean(selectedName && search?.value === selectedName);
      document.dispatchEvent(
        new CustomEvent("park:filter", {
          detail: {
            names: visibleNames,
            active: Boolean(kind || town || query || wanted.length || selectedName),
            fromMap,
          },
        }),
      );
    };

    const applySort = () => {
      sortButtons.forEach((btn) => {
        const th = btn.closest("th");
        const active = btn.dataset.sort === sortKey;
        if (th) {
          th.setAttribute("aria-sort", active ? (sortDir === 1 ? "ascending" : "descending") : "none");
        }
        const mark = btn.querySelector(".parks-sort-mark");
        if (mark) mark.textContent = active ? (sortDir === 1 ? "▲" : "▼") : "";
      });
      if (!sortKey) return;
      const sorted = allRows().sort((a, b) => {
        if (sortKey === "area") {
          const av = Number.parseFloat(a.dataset.area || "") || 0;
          const bv = Number.parseFloat(b.dataset.area || "") || 0;
          return (av - bv) * sortDir;
        }
        return (a.dataset.name || "").localeCompare(b.dataset.name || "", "ja") * sortDir;
      });
      sorted.forEach((row) => tbody.appendChild(row));
    };

    const clearSelected = () => {
      selectedName = "";
    };
    select?.addEventListener("change", () => {
      clearSelected();
      applyFilter();
    });
    kindSelect?.addEventListener("change", () => {
      clearSelected();
      applyFilter();
    });
    search?.addEventListener("input", () => {
      clearSelected();
      applyFilter();
    });
    checks.forEach((c) =>
      c.addEventListener("change", () => {
        clearSelected();
        applyFilter();
      }),
    );

    // 地図のポリゴンクリックなどから、公園名で1件だけ絞り込む。
    document.addEventListener("park:filter-name", (e: Event) => {
      const detail = (e as CustomEvent).detail || {};
      const name = detail.name;
      if (!name) return;
      selectedName = name;
      if (search) search.value = name;
      if (select) select.value = "";
      if (kindSelect) kindSelect.value = "";
      checks.forEach((c) => {
        c.checked = false;
      });
      applyFilter();
      const row = allRows().find((r) => r.dataset.name === name);
      if (row) {
        row.classList.add("is-highlighted");
        window.setTimeout(() => row.classList.remove("is-highlighted"), 2000);
        if (detail.scroll) {
          row.scrollIntoView({ behavior: "smooth", block: "center" });
        }
      }
    });
    sortButtons.forEach((btn) => {
      btn.addEventListener("click", () => {
        const key = btn.dataset.sort;
        if (sortKey === key) {
          sortDir = -sortDir;
        } else {
          sortKey = key ?? null;
          sortDir = 1;
        }
        applySort();
      });
    });
    applyFilter();
  });
</script>