---
// 小平市の公園一覧（/kodaira-data/parks/）を表示する。
// データは src/data/kodaira-parks.json（市立332件＋市立以外）。
// DOM を抑えるため、設備は1セルにまとめ、アイコンは CSS の擬似要素で描く。
// 絞り込み・並べ替え・カード表示は利用者の端末で実行する。
import parksData from "@/data/kodaira-parks.json";
import osmData from "@/data/parks-geojson";
import nearbyData from "@/data/kodaira-nearby-parks.json";

type Park = Record<string, string>;

function nearbyCentroid(feature: any): [number, number] {
  const g = feature.geometry;
  const ring = g.type === "Polygon" ? g.coordinates[0] : g.coordinates[0][0];
  if (!ring?.length) return [0, 0];
  let lat = 0;
  let lon = 0;
  for (const [x, y] of ring) {
    lon += x;
    lat += y;
  }
  return [lat / ring.length, lon / ring.length];
}

// 市境500m以内の市外公園。小平市の公園と同じ表に「市外」バッジ付きで並べる。
const nearbyRows: Park[] = ((nearbyData as any).features ?? []).map((f: any) => {
  const p = f.properties || {};
  const [lat, lon] = nearbyCentroid(f);
  const area = Math.round(Number(p.area_m2) || 0);
  const name = String(p.name || "").trim();
  // 市外の公園も公園名で開く。市名が分かる場合は市名を付ける。
  const mapsQuery = name
    ? p.city
      ? `${p.city}${name}`
      : name
    : `${lat},${lon}`;
  return {
    "公園名": name,
    "住所": p.city ? `${p.city}（市外）` : "市外",
    "町名": "市外",
    "面積㎡": area ? String(area) : "",
    "500㎡以上": "",
    "種別": "市外",
    "南西部指定管理": "",
    "トイレ": "",
    "水飲み場": "",
    "ベンチ・椅子": "",
    "テーブル": "",
    "パーゴラ": "",
    "東屋": "",
    "防災用具": "",
    "ボール遊び": "",
    "遊具": "",
    "駐車場": "",
    "その他設備": "",
    "緯度": String(lat),
    "経度": String(lon),
    "備考": `市外・小平市境から約${Math.round(Number(p.distance_m) || 0)}m`,
    "設置者": "市外",
    "状態": "",
    "地図キー": `${p.osm_type || ""}/${p.osm_id || ""}`,
    "地図URL": `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(mapsQuery)}`,
  };
});

const parks = [...(parksData as Park[]), ...nearbyRows];

// OpenStreetMapにポリゴンがあり、地図から位置を表示できる公園名。
// 市外の近隣公園も地図に表示しているので、同じように地図で見られる。
const mappedNames = new Set<string>([
  ...(osmData as any).features.map((f: any) => f.properties?.our_name).filter(Boolean),
  ...((nearbyData as any).features ?? [])
    .map((f: any) => String(f.properties?.name || "").trim())
    .filter(Boolean),
]);

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",
};

// 市立以外の公園に付けるバッジ（設置者が空欄なら市立として扱う）。
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: "toy", label: "遊具", title: `遊具: ${p["遊具"]}` });
  }
  if (p["パーゴラ"]) {
    badges.push({ kind: "pergola", label: "パーゴラ", title: `パーゴラ: ${p["パーゴラ"]}` });
  }
  if (p["東屋"]) {
    badges.push({ kind: "azumaya", 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("toy");
  if (p["パーゴラ"]) tokens.push("pergola");
  if (p["東屋"]) tokens.push("azumaya");
  const ball = p["ボール遊び"];
  if (ball && ball !== "禁止") tokens.push("ball");
  if (p["南西部指定管理"]) tokens.push("cm");
  return tokens.join(" ");
}

// 設備セルの補足テキスト（バッジで示した項目の詳細と、その他の項目）。
// ラベル文字は使わず、アイコンで項目を示す。
const DETAIL_FIELDS: { key: string; icon: string }[] = [
  { 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["ボール遊び"],
    ...DETAIL_FIELDS.map((f) => p[f.key]),
  ]
    .join(" ")
    .toLowerCase();
}

const towns = [...new Set(parks.map((p) => p["町名"]).filter(Boolean))].sort((a, b) =>
  a.localeCompare(b, "ja"),
);
const total = parks.length;
---

<div class="parks" data-parks>
  <div class="parks-controls">
    <label>
      <span>町名</span>
      <select data-parks-town>
        <option value="">すべての町名</option>
        {towns.map((town) => (
          <option value={town}>{town}</option>
        ))}
      </select>
    </label>
    <label>
      <span>キーワード</span>
      <input type="search" data-parks-search placeholder="公園名・住所・遊具など" />
    </label>
    <fieldset class="parks-facilities">
      <legend>設備・管理で絞る</legend>
      <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
      <label><input type="checkbox" data-fac-filter value="water" />水飲み場</label>
      <label><input type="checkbox" data-fac-filter value="toy" />遊具</label>
      <label><input type="checkbox" data-fac-filter value="pergola" />パーゴラ</label>
      <label><input type="checkbox" data-fac-filter value="azumaya" />東屋</label>
      <label><input type="checkbox" data-fac-filter value="ball" />ボール遊び</label>
      <label><input type="checkbox" data-fac-filter value="cm" />指定管理</label>
    </fieldset>
    <span class="parks-count" data-parks-count aria-live="polite">{total}件</span>
  </div>
  <p class="parks-hint">設備の情報は、市の資料などに基づきます。設備で絞ると、この情報がある公園だけが対象になります。</p>
  <p class="parks-none" data-parks-none hidden>条件に合う公園が見つかりませんでした。</p>

  <div class="parks-scroll">
    <table>
      <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-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["公園名"]
              )}
              {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["種別"]]}
                >
                  {park["種別"]}
                </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 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sl-color-hairline, #ddd);
    border-radius: 0.3rem;
  }
  .parks table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .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;
  }
  .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 {
    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;
  }
  .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;
    gap: 0.3em;
    font-size: 0.9em;
  }
  .parks-type::before {
    content: "";
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--type-color, #888);
    flex: none;
  }
  .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 .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 = root.querySelector<HTMLSelectElement>("[data-parks-town]");
    const search = root.querySelector<HTMLInputElement>("[data-parks-search]");
    const count = root.querySelector("[data-parks-count]");
    const none = root.querySelector<HTMLElement>("[data-parks-none]");
    const tbody = root.querySelector("tbody");
    const checks = Array.from(root.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 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 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 = 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(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();
    });
    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 = "";
      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>