---
// 小平市の公園一覧（/kodaira-data/parks/）を表示する。
// データは src/data/kodaira-parks.json（321件、市の公開資料から作成）。
// 町名セレクトとキーワード入力で絞り込む（絞り込みは利用者の端末で実行）。
import parksData from "@/data/kodaira-parks.json";

type Park = Record<string, string>;
const parks = parksData as Park[];

const EMPTY = "—";

const columns: { key: string; label: string; numeric?: boolean; wide?: boolean }[] = [
  { key: "公園名", label: "公園名" },
  { key: "住所", label: "住所" },
  { key: "面積㎡", label: "面積（㎡）", numeric: true },
  { key: "500㎡以上", label: "500㎡以上" },
  { key: "種別", label: "種別" },
  { key: "南西部指定管理", label: "南西部指定管理" },
  { key: "トイレ", label: "トイレ", wide: true },
  { key: "水飲み場", label: "水飲み場" },
  { key: "ベンチ・椅子", label: "ベンチ・椅子", wide: true },
  { key: "テーブル", label: "テーブル", wide: true },
  { key: "防災用具", label: "防災用具", wide: true },
  { key: "ボール遊び", label: "ボール遊び", wide: true },
  { key: "遊具", label: "遊具", wide: true },
  { key: "備考", label: "備考", wide: true },
];

function display(key: string, value: string): string {
  if (value === "" || value == null) return EMPTY;
  if (key === "面積㎡") {
    const n = Number(value);
    if (Number.isFinite(n)) return n.toLocaleString("ja-JP");
  }
  return value;
}

// 検索対象（公園名・住所・町名・種別・ボール遊び・遊具・備考）。
function searchIndex(p: Park): string {
  return [
    p["公園名"],
    p["住所"],
    p["町名"],
    p["種別"],
    p["ボール遊び"],
    p["遊具"],
    p["備考"],
  ]
    .join(" ")
    .toLowerCase();
}

const towns = [...new Set(parks.map((p) => p["町名"]))].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>
    <span class="parks-count" data-parks-count aria-live="polite">{total}件</span>
  </div>

  <div class="parks-scroll">
    <table>
      <thead>
        <tr>
          {columns.map((col) => (
            <th scope="col">{col.label}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {parks.map((park) => (
          <tr data-town={park["町名"]} data-search={searchIndex(park)}>
            {columns.map((col) => (
              <td
                class:list={[
                  col.numeric && "is-num",
                  col.wide && "is-wide",
                  park[col.key] === "" && "is-empty",
                ]}
              >
                {display(col.key, park[col.key])}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

<style>
  .parks-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin: 1rem 0;
  }
  .parks-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
  }
  .parks-controls select,
  .parks-controls input {
    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-count {
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--sl-color-gray-3, #666);
  }
  .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 .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .parks .is-wide {
    white-space: normal;
    min-width: 11rem;
    max-width: 20rem;
  }
  .parks .is-empty {
    color: var(--sl-color-gray-4, #aaa);
    text-align: center;
  }
</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 rows = Array.from(root.querySelectorAll<HTMLTableRowElement>("tbody tr"));
    const total = rows.length;

    const apply = () => {
      const town = select ? select.value : "";
      const query = search ? search.value.trim().toLowerCase() : "";
      let shown = 0;
      rows.forEach((row) => {
        const okTown = !town || row.dataset.town === town;
        const okText = !query || (row.dataset.search || "").includes(query);
        const ok = okTown && okText;
        row.hidden = !ok;
        if (ok) shown += 1;
      });
      if (count) count.textContent = `${shown} / ${total}件`;
    };

    select?.addEventListener("change", apply);
    search?.addEventListener("input", apply);
    apply();
  });
</script>