path: root/src/components/ParksTable.astro

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

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

// スイング遊具・健康遊具の判定用
const SPRING_TOKENS = [
  "スプリング", "スイング", "リトルポップ", "リンクミニ", "ルッキンロッキン",
  "リーフィー", "チューリー", "ロッキンパッピー", "ロッキンパピー", "ビー", "ハッピー",
  "ハニー", "クップル", "ウゴウゴ",
];
const HEALTH_TOKENS = [
  "フィットコンビ", "レグオーバー", "アームウォーカー", "ホップオーバー",
  "ジャンプ・ステップ", "立位体前屈", "懸垂", "垂直飛び", "閉眼片足立ち",
  "腕歩行", "リラックスボード", "パネルラダー", "棒とびこし",
  "脚のばし", "ふみいたストレッチ",
];
const STANDARD_PLAY_TOKENS = [
  "ブランコ", "ぶらんこ", "滑台", "滑り台", "すべり台", "砂場", "鉄棒", "複合遊具",
  "ジャングル", "ヒコーキ", "飛行機", "シーソー",
  ...SPRING_TOKENS,
  ...HEALTH_TOKENS,
];
function playSegments(play: string): string[] {
  return play.split(/[、,]/).map((s) => s.trim()).filter(Boolean);
}
function hasSpecialToy(play: string): boolean {
  return playSegments(play).some(
    (segment) => !STANDARD_PLAY_TOKENS.some((token) => segment.includes(token)),
  );
}

// 設備フィルタ用のトークン（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["遊具"] || "";
  const segments = playSegments(play);
  if (play.includes("砂場")) tokens.push("sand");
  if (play.includes("ブランコ")) tokens.push("swing");
  if (play.includes("シーソー")) tokens.push("seesaw");
  if (
    segments.some(
      (segment) =>
        !segment.includes("ロープスイング") &&
        SPRING_TOKENS.some((token) => segment.includes(token)),
    )
  ) {
    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("basket");
  // シェルター等の欄には、シェルター・東屋・パーゴラ・GTシェードが混在している。
  // 「東屋／シェルター」と「パーゴラ」を別々に絞れるよう、キーワードで分ける。
  const shelterText = (p["シェルター等"] || "").trim();
  if (/東屋|シェルター|シェード/.test(shelterText)) tokens.push("shelter");
  if (shelterText.includes("パーゴラ")) tokens.push("pergola");
  if (HEALTH_TOKENS.some((token) => play.includes(token))) tokens.push("health");
  if (hasSpecialToy(play)) tokens.push("special");
  if (play.includes("幼児")) tokens.push("toddler");
  const clock = (p["時計"] || "").trim();
  if (clock === "○" || clock === "あり" || clock === "有" || clock === "1") tokens.push("clock");
  if (p["南西部指定管理"]) tokens.push("cm");
  // 草地広場がある公園だけを「草地広場」で絞り込む。
  if (p["草地広場"]) tokens.push("picnic");
  // 野外卓・縁台がある公園。
  if ((p["野外卓"] || "").trim()) tokens.push("table");
  // 利用ルール（ボール遊び禁止の表示なし・犬禁止の表示なし）。
  // 「禁止」と記録されていない公園を対象にする（未記録も含む）。
  // 公共施設と市外の公園は利用ルールを調べていないので対象外。
  if (p["施設"] !== "1" && p["種別"] !== "市外") {
    if (!/禁止/.test(p["ボール遊び"] || "")) tokens.push("ballok");
    if (!/禁止/.test(p["ペット"] || "")) tokens.push("dogok");
  }
  return tokens.join(" ");
}

// 一覧の施設・備考は、フキダシと同じ「アイコン＋値」の行で表示する。
const FACILITY_KEYS = [
  "ベンチ・椅子", "野外卓", "シェルター等", "草地広場", "多目的広場",
  "築山", "じゃぶじゃぶ池", "防災用具", "遊具", "時計", "駐車場",
  "その他設備", "備考",
];
type FacilityRow = { icon: string; cls: string; value: string; banned?: boolean };
const textOf = (value: unknown) => String(value ?? "").trim();
const presenceText = (label: string, value: unknown) => {
  const v = textOf(value);
  if (!v) return "";
  return /^[○〇◯あり有1]+$/.test(v) ? `${label}あり` : v;
};
const waterText = (value: string) => {
  const text = textOf(value);
  if (!text) return "";
  if (/[?？]/.test(text)) return "水飲み場？";
  let total = 0;
  let hasDrink = false;
  let hasWash = false;
  for (const part of text.split(/[、,]/)) {
    const nums = [...part.matchAll(/[x×](\d+)/g)].map((m) => Number(m[1]));
    if (nums.length) total += nums.reduce((a, b) => a * b, 1);
    if (/水飲/.test(part)) hasDrink = true;
    if (/手洗/.test(part)) hasWash = true;
  }
  // 水飲み専用の水栓がなく、手洗いだけの場合はその旨を添える。
  const label = !hasDrink && hasWash ? "水飲み場（水飲水栓なし）" : "水飲み場";
  return total > 0 ? `${label}x${total}` : label;
};
function disasterText(value: string): string {
  return value
    .split(/[、,]/)
    .map((s) => s.trim())
    .filter((s) => s && !s.includes("防火水槽") && !s.includes("消火栓"))
    .filter((s) => /かまど|カマド|防災収納|レスキュー|防災器具|避難/.test(s))
    .join("、");
}
function facilityRows(p: Park): FacilityRow[] {
  const rows: FacilityRow[] = [];
  // 遊具もフキダシと同じく「遊」の文字アイコンを付ける。
  if (textOf(p["遊具"])) {
    rows.push({ icon: '<span class="fac-text">遊</span>', cls: "", value: textOf(p["遊具"]) });
  }
  if (textOf(p["トイレ"])) {
    rows.push({
      icon: '<span class="fac-text">WC</span>',
      cls: "is-toilet",
      value: textOf(p["トイレ"]),
    });
  }
  const water = textOf(p["水飲み場"]);
  if (water) {
    rows.push({ icon: PARK_ICONS.water.svg, cls: "is-water", value: waterText(water) });
  }
  if (textOf(p["給水"])) {
    rows.push({ icon: PARK_ICONS.water.svg, cls: "is-water", value: textOf(p["給水"]) });
  }
  if (textOf(p["ベンチ・椅子"])) {
    rows.push({ icon: PARK_ICONS.bench.svg, cls: "is-bench", value: textOf(p["ベンチ・椅子"]) });
  }
  if (textOf(p["野外卓"])) {
    rows.push({ icon: PARK_ICONS.picnic.svg, cls: "", value: textOf(p["野外卓"]) });
  }
  if (textOf(p["シェルター等"])) {
    rows.push({ icon: PARK_ICONS.shelter.svg, cls: "", value: textOf(p["シェルター等"]) });
  }
  if (textOf(p["草地広場"])) {
    rows.push({ icon: PARK_ICONS.grass.svg, cls: "is-grass", value: presenceText("草地広場", p["草地広場"]) });
  }
  if (textOf(p["多目的広場"])) {
    rows.push({ icon: '<span class="fac-text">広</span>', cls: "", value: presenceText("多目的広場", p["多目的広場"]) });
  }
  if (textOf(p["築山"])) {
    rows.push({ icon: PARK_ICONS.mountain.svg, cls: "", value: presenceText("築山", p["築山"]) });
  }
  if (textOf(p["じゃぶじゃぶ池"])) {
    rows.push({ icon: PARK_ICONS.pond.svg, cls: "is-pond", value: presenceText("じゃぶじゃぶ池", p["じゃぶじゃぶ池"]) });
  }
  const ballText = textOf(p["ボール遊び"]);
  const matchText = textOf(p["試合形式のボール遊び"]);
  const ballBanned = /禁止/.test(ballText);
  const ballValue = ballBanned
    ? "ボール遊び禁止"
    : /禁止/.test(matchText)
      ? "試合形式禁止"
      : ballText;
  if (ballValue) {
    rows.push({ icon: PARK_ICONS.ball.svg, cls: "is-ball", value: ballValue, banned: ballBanned });
  }
  const pet = textOf(p["ペット"]);
  if (pet) {
    rows.push({ icon: PARK_ICONS.dog.svg, cls: "is-pet", value: pet, banned: /禁止/.test(pet) });
  }
  if (textOf(p["時計"])) {
    rows.push({ icon: PARK_ICONS.clock.svg, cls: "is-clock", value: presenceText("時計", p["時計"]) });
  }
  const disaster = disasterText(textOf(p["防災用具"]));
  if (disaster) {
    rows.push({ icon: '<span class="fac-text">災</span>', cls: "", value: disaster });
  }
  if (textOf(p["駐車場"])) {
    rows.push({ icon: '<span class="fac-text">P</span>', cls: "", value: textOf(p["駐車場"]) });
  }
  if (textOf(p["その他設備"])) {
    rows.push({ icon: '<span class="fac-text">他</span>', cls: "", value: textOf(p["その他設備"]) });
  }
  if (textOf(p["備考"])) {
    rows.push({ icon: "", cls: "", value: textOf(p["備考"]) });
  }
  if (p["南西部指定管理"]) {
    rows.push({ icon: "", cls: "", value: "指定管理" });
  }
  return rows;
}

// 面積（数値）
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["草地広場"] ? "草地広場" : "",
    p["多目的広場"] ? "多目的広場" : "",
    p["築山"] ? "築山" : "",
    p["じゃぶじゃぶ池"] ? "じゃぶじゃぶ池" : "",
    p["ボール遊び"],
    ...FACILITY_KEYS.map((key) => p[key]),
  ]
    .join(" ")
    .toLowerCase();
}

// 編集画面（park-editor）の確認チェックが「済」でないものを未確認とする。
// 対象は市内公園（市内の公共施設・市外の公園は各タブで管理する）。
function isUnconfirmed(p: Park): boolean {
  if (p["施設"] === "1") return false;
  if (p["種別"] === "市外") return false;
  return (p["確認"] || "") !== "済";
}
---

<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)}
            data-unconfirmed={isUnconfirmed(park) ? "1" : undefined}
          >
            <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["公園名"]}
                  <span class="park-focus-ico" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="6"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
                  </span>
                </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}
              {isUnconfirmed(park) ? (
                <span class="parks-status parks-unconfirmed" 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["公園名"]}」を開く`}
              ><span class="addr-google" set:html={PARK_ICONS.google.svg} />{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="施設・備考">
              {facilityRows(park).length ? (
                <span class="fac-detail">
                  {facilityRows(park).map((row) => (
                    <span class="fac-detail-row">
                      {row.icon ? (
                        <span class:list={["fac-detail-ico", row.cls, row.banned ? "is-banned" : ""]} set:html={row.icon} />
                      ) : (
                        <span />
                      )}
                      <span>{row.value}</span>
                    </span>
                  ))}
                </span>
              ) : (
                EMPTY
              )}
            </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 {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .parks colgroup {
    display: none;
  }
  /* 1行を「公園情報」「施設・備考」の2列で表示する（PC・スマホ共通） */
  .parks tbody,
  .parks tbody tr,
  .parks td {
    display: block;
  }
  .parks tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.26fr) minmax(0, 1.26fr);
    grid-template-areas:
      "name name fac"
      "addr addr fac"
      "area type fac";
    gap: 0 0.6rem;
    padding: 0.2rem 0.6rem;
    border-bottom: 0;
  }
  .parks table tbody td {
    border: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .parks .is-name {
    grid-area: name;
  }
  .parks .is-address {
    grid-area: addr;
    min-width: 0;
  }
  .parks .is-num {
    grid-area: area;
    text-align: left;
  }
  .parks .is-type {
    grid-area: type;
    text-align: left;
  }
  .parks .is-facility {
    grid-area: fac;
    min-width: 0;
    max-width: none;
    border-left: 1px solid var(--sl-color-hairline, #ddd);
    padding-left: 0.65rem;
  }
  .parks thead {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sl-color-gray-6, #f2f2f2);
    border-bottom: 1px solid var(--sl-color-hairline, #ddd);
  }
  .parks thead tr {
    display: grid;
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.26fr) minmax(0, 1.26fr);
    grid-template-areas:
      "h-name h-name h-fac"
      "h-area h-type h-fac";
  }
  .parks thead th {
    position: static;
    border: 0;
    background: transparent;
    padding: 0.35rem 0.65rem;
    text-align: left;
    vertical-align: bottom;
    white-space: normal;
    color: var(--sl-color-white, inherit);
  }
  .parks thead th:nth-child(1) {
    grid-area: h-name;
  }
  .parks thead th:nth-child(2) {
    display: none;
  }
  .parks thead th:nth-child(3) {
    grid-area: h-area;
  }
  .parks thead th:nth-child(4) {
    grid-area: h-type;
  }
  .parks thead th:nth-child(5) {
    grid-area: h-fac;
  }
  .parks tbody tr:nth-child(even) td {
    background: transparent;
  }
  .parks tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--sl-color-text, #333) 5%, transparent);
  }
  .parks tbody tr.is-selected td:first-child {
    box-shadow: none;
  }
  .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.3;
  }
  .parks .is-address,
  .parks .is-num,
  .parks .is-type {
    line-height: 1.25;
  }
  .parks-owner {
    display: inline-block;
    margin: 0 0.35rem 0 0;
    padding: 0.02rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    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: 0 0.35rem 0 0;
    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.2;
    vertical-align: 0.08em;
    white-space: nowrap;
  }
  .parks-unconfirmed {
    border-color: #bdbdbd;
    background: #f5f5f5;
    color: #424242;
  }
  .park-name-link {
    display: 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);
  }
  .park-focus-ico {
    display: inline-flex;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.2em;
    color: #0277bd;
    vertical-align: -0.08em;
  }
  .park-focus-ico svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .parks tbody tr.is-highlighted {
    background: #fff59d !important;
    outline: 2px solid #f9a825;
    outline-offset: -2px;
  }
  .parks tbody tr.is-highlighted td {
    background: transparent !important;
  }
  .parks tbody tr.is-selected {
    background: #ffe0b2 !important;
    outline: 2px solid #e65100;
    outline-offset: -2px;
  }
  .parks tbody tr.is-selected td {
    background: transparent !important;
  }
  .parks .is-address {
    font-size: 0.8em;
    white-space: normal;
  }
  .parks .is-address a {
    color: var(--sl-color-text-accent, #357);
  }
  .parks .addr-google {
    display: inline-flex;
    width: 1em;
    height: 1em;
    margin-right: 0.15em;
    vertical-align: -0.12em;
  }
  .parks .addr-google :global(svg) {
    display: block;
    width: 100%;
    height: 100%;
  }
  .parks .is-num {
    text-align: left;
    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.2;
    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;
  }
  .parks .fac-detail {
    display: grid;
    gap: 0.1rem;
    font-size: 0.8em;
    opacity: 0.9;
  }
  .parks .fac-detail-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
  }
  .parks .fac-detail-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid #c8e6c9;
    border-radius: 4px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .parks .fac-detail-ico :global(svg) {
    display: block;
    width: 14px;
    height: 14px;
  }
  .parks .fac-detail-ico.is-toilet {
    border-color: #263238;
    background: #455a64;
    color: #fff;
    font-size: 8px;
  }
  .parks .fac-detail-ico.is-water {
    border-color: #90caf9;
    background: #e3f2fd;
    color: #0277bd;
  }
  .parks .fac-detail-ico.is-bench {
    border-color: #d7ccc8;
    background: #efebe9;
    color: #6d4c41;
  }
  .parks .fac-detail-ico.is-pond {
    border-color: #81d4fa;
    background: #e1f5fe;
    color: #29b6f6;
  }
  .parks .fac-detail-ico.is-clock {
    border-color: #ffe082;
    background: #fff8e1;
    color: #f9a825;
  }
  .parks .fac-detail-ico.is-ball {
    color: #2e7d32;
  }
  .parks .fac-detail-ico.is-pet {
    padding: 0;
    border-color: #e0e0e0;
    background: #fff;
    color: #6d4c41;
  }
  .parks .fac-detail-ico.is-pet :global(svg) {
    width: 100%;
    height: 100%;
  }
  .parks .fac-detail-ico.is-banned {
    overflow: hidden;
  }
  .parks .fac-detail-ico.is-banned::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%),
      linear-gradient(-45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%);
  }
  .parks .fac-detail-ico :global(.fac-text) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: nowrap;
  }

  /* スマートフォンではヘッダーを省き、余白を詰める（2列レイアウトは共通） */
  @media (max-width: 700px) {
    .parks table {
      font-size: 0.8rem;
    }
    .parks thead {
      display: none;
    }
    .parks tbody tr {
      gap: 0 0.45rem;
      padding: 0.2rem 0.5rem;
    }
    .parks .is-facility {
      padding-left: 0.5rem;
    }
  }
</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 searchClear = document.querySelector<HTMLButtonElement>(
      "[data-parks-search-clear]",
    );
    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 unconfirmedBox = document.querySelector<HTMLInputElement>(
      "[data-parks-unconfirmed]",
    );
    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;
    // 表の枠内だけでスクロールする（ブラウザごと動かさない）
    const scrollRowIntoView = (row: HTMLElement) => {
      const scroller = root.querySelector<HTMLElement>(".parks-scroll");
      if (!scroller) return;
      const thead = scroller.querySelector("thead");
      const headH = thead ? thead.getBoundingClientRect().height : 0;
      const rowRect = row.getBoundingClientRect();
      const scRect = scroller.getBoundingClientRect();
      const delta = rowRect.top - scRect.top - headH - 2;
      scroller.scrollTo({ top: scroller.scrollTop + delta, behavior: "smooth" });
    };

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

    const applyFilter = (focus: boolean | "later" = false) => {
      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);
      const onlyUnconfirmed = Boolean(unconfirmedBox?.checked);
      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 okUnconfirmed = !onlyUnconfirmed || row.dataset.unconfirmed === "1";
        const ok = okKind && okTown && okText && okFac && okSelected && okUnconfirmed;
        row.classList.toggle("is-hidden", !ok);
        if (ok) shown += 1;
      });
      if (count) count.textContent = `${shown} / ${total}件`;
      if (none) none.hidden = shown !== 0;
      // 地図側に絞り込み結果を通知する。
      const visibleRows = allRows().filter((row) => !row.classList.contains("is-hidden"));
      const visibleNames = visibleRows
        .map((row) => row.dataset.name || "")
        .filter(Boolean);
      // 市外の近い公園は名前が小平市内と重複することがあるため、別に渡す。
      const visibleNearbyNames = visibleRows
        .filter((row) => row.dataset.town === "市外")
        .map((row) => row.dataset.name || "")
        .filter(Boolean);
      const fromMap = Boolean(selectedName && search?.value === selectedName);
      document.dispatchEvent(
        new CustomEvent("park:filter", {
          detail: {
            names: visibleNames,
            nearbyNames: visibleNearbyNames,
            active: Boolean(
              kind || town || query || wanted.length || selectedName || onlyUnconfirmed,
            ),
            fromMap,
            focus,
          },
        }),
      );
    };

    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 = "";
      allRows().forEach((row) => row.classList.remove("is-selected"));
    };
    select?.addEventListener("change", () => {
      clearSelected();
      applyFilter(true);
    });
    kindSelect?.addEventListener("change", () => {
      clearSelected();
      applyFilter(true);
    });
    search?.addEventListener("input", () => {
      clearSelected();
      applyFilter("later");
      updateSearchClear();
    });
    const updateSearchClear = () => {
      if (searchClear && search) searchClear.hidden = !search.value;
    };
    searchClear?.addEventListener("click", () => {
      if (!search) return;
      search.value = "";
      updateSearchClear();
      clearSelected();
      applyFilter(true);
      search.focus();
    });
    checks.forEach((c) =>
      c.addEventListener("change", () => {
        clearSelected();
        applyFilter(true);
      }),
    );
    unconfirmedBox?.addEventListener("change", () => {
      clearSelected();
      applyFilter(true);
    });

    // 地図のポリゴンクリック時は、キーワードを変えずに一覧の行を強調する。
    document.addEventListener("park:select-row", (e: Event) => {
      const name = (e as CustomEvent).detail?.name;
      if (!name) return;
      allRows().forEach((row) => {
        row.classList.toggle("is-selected", row.dataset.name === name);
      });
      const row = allRows().find((r) => r.dataset.name === name);
      if (row && !row.classList.contains("is-hidden")) {
        scrollRowIntoView(row);
      }
    });

    // 地図のポリゴンクリックなどから、公園名で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) {
          scrollRowIntoView(row);
        }
      }
    });
    sortButtons.forEach((btn) => {
      btn.addEventListener("click", () => {
        const key = btn.dataset.sort;
        if (sortKey === key) {
          sortDir = -sortDir;
        } else {
          sortKey = key ?? null;
          sortDir = 1;
        }
        applySort();
      });
    });
    applyFilter();
    updateSearchClear();
  });
</script>