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

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

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

// 設備バッジ（アイコンは 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["遊具"]}` });
  }
  const ball = p["ボール遊び"];
  if (ball && ball !== "禁止") {
    const label = ball.includes("一部") ? "ボール遊び一部可" : "ボール遊び可";
    badges.push({ kind: "ball", label, title: `ボール遊び: ${ball}` });
  }
  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");
  const ball = p["ボール遊び"];
  if (ball && ball !== "禁止") tokens.push("ball");
  return tokens.join(" ");
}

// 設備セルの補足テキスト（バッジで示した項目の詳細と、その他の項目）。
const DETAIL_FIELDS: { key: string; label: string }[] = [
  { key: "ベンチ・椅子", label: "ベンチ・椅子" },
  { key: "テーブル", label: "テーブル" },
  { key: "防災用具", label: "防災用具" },
  { key: "遊具", label: "遊具" },
  { key: "備考", label: "備考" },
];
function detailText(p: Park): string {
  const parts: string[] = [];
  if (p["南西部指定管理"]) parts.push("南西部指定管理");
  for (const { key, label } of DETAIL_FIELDS) {
    const value = p[key];
    if (!value) continue;
    parts.push(key === "備考" ? value : `${label}: ${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(name: string): string {
  const query = encodeURIComponent(`小平市${name}`);
  return `https://www.google.com/maps/search/?api=1&query=${query}`;
}

// 検索対象（公園名・住所・町名・種別・設備・備考）。
function searchIndex(p: Park): string {
  return [
    p["公園名"],
    p["住所"],
    p["町名"],
    p["種別"],
    p["トイレ"],
    p["水飲み場"],
    p["ボール遊び"],
    ...DETAIL_FIELDS.map((f) => p[f.key]),
  ]
    .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>
    <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="ball" />ボール遊び</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="公園名">{park["公園名"]}</td>
            <td class="is-address" data-label="住所">
              <a
                href={mapsUrl(park["公園名"])}
                target="_blank"
                rel="noopener"
                title={`Googleマップで「${park["公園名"]}」を開く`}
              >{park["住所"]}</a>
            </td>
            <td
              class="is-num"
              data-label="面積"
              data-size={sizeLabel(areaNumber(park["面積㎡"]))}
              title={sizeTitle(areaNumber(park["面積㎡"]))}
            >
              {areaText(park["面積㎡"])}㎡
            </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}>
                  {b.label}
                </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 .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 .is-facility {
    white-space: normal;
    min-width: 12rem;
    max-width: 26rem;
  }
  .parks .fac-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin: 0 0.3em 0.2em 0;
    padding: 0 0.5em;
    border-radius: 1em;
    font-size: 0.8em;
    line-height: 1.8;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
  .parks .fac-toilet::before {
    content: "🚻";
  }
  .parks .fac-water::before {
    content: "🚰";
  }
  .parks .fac-toy::before {
    content: "🎠";
  }
  .parks .fac-ball::before {
    content: "⚽";
  }
  .parks .fac-detail {
    display: block;
    margin-top: 0.25em;
    font-size: 0.8em;
    opacity: 0.85;
  }

  /* スマートフォンでは1件ずつカードで表示する。 */
  @media (max-width: 640px) {
    .parks-scroll {
      overflow-x: visible;
      border: none;
      border-radius: 0;
    }
    .parks table,
    .parks tbody,
    .parks tr,
    .parks td {
      display: block;
      width: auto;
    }
    .parks thead {
      display: none;
    }
    .parks tbody tr {
      margin-bottom: 0.6rem;
      padding: 0.4rem 0.6rem;
      border: 1px solid var(--sl-color-hairline, #ddd);
      border-radius: 0.4rem;
    }
    .parks tbody tr:nth-child(even) td {
      background: transparent;
    }
    .parks td {
      border: none;
      padding: 0.1rem 0;
      white-space: normal;
      max-width: none;
    }
    .parks td::before {
      content: attr(data-label) "：";
      display: inline-block;
      min-width: 4.5em;
      font-size: 0.85em;
      opacity: 0.7;
    }
    .parks td.is-name {
      font-size: 1rem;
    }
    .parks td.is-name::before {
      content: none;
    }
    .parks td.is-num,
    .parks td.is-type {
      text-align: left;
    }
  }
</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("[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;

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

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

    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 ok = okTown && okText && okFac;
        row.classList.toggle("is-hidden", !ok);
        if (ok) shown += 1;
      });
      if (count) count.textContent = `${shown} / ${total}件`;
      if (none) none.hidden = shown !== 0;
    };

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

    select?.addEventListener("change", applyFilter);
    search?.addEventListener("input", applyFilter);
    checks.forEach((c) => c.addEventListener("change", applyFilter));
    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>