---
// 地域センター・公民館・児童館・図書館・市役所支所・文化施設の一覧。
// 小平市の施設に加えて、市境500m以内の市外施設（図書館・公民館・児童館）も表示する。
// トイレは市の公共施設として基本的に利用できる。給水は公式ページに明記が少ないため「未確認」が多い。
import facilitiesData from "@/data/kodaira-facilities.json";
import nearbyFacilitiesData from "@/data/kodaira-nearby-facilities.json";

type Facility = {
  name: string;
  type: string;
  address: string;
  hours: string;
  closed: string;
  toilet: string;
  water: string;
  note: string;
  source: string;
  nearby?: boolean;
  city?: string;
  distance_m?: number;
};

const facilities = [
  ...(facilitiesData as Facility[]),
  ...(nearbyFacilitiesData as Facility[]),
];
const types = [
  "地域センター",
  "公民館",
  "児童館",
  "図書館",
  "市役所支所",
  "文化施設",
];
const mapsUrl = (f: Facility) => {
  // 市外の施設は「小平市」を付けない。名前が市名を含む場合は二重にしない。
  const query = f.nearby
    ? f.city && !f.name.startsWith(f.city)
      ? `${f.city}${f.name}`
      : f.name
    : `小平市${f.name}`;
  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
};
---

<div class="facilities" data-fac-root>
  <div class="fac-controls">
    <label>
      種別
      <select data-fac-type>
        <option value="">すべて</option>
        {types.map((type) => <option value={type}>{type}</option>)}
      </select>
    </label>
    <label>
      キーワード
      <input type="search" data-fac-search placeholder="施設名・住所・備考" />
    </label>
    <label><input type="checkbox" data-fac-toilet /> トイレ○</label>
    <label><input type="checkbox" data-fac-water /> 給水○</label>
    <span class="fac-count" data-fac-count>{facilities.length}件</span>
  </div>

  <div class="fac-table-wrap">
    <table>
      <thead>
        <tr>
          <th scope="col">施設名</th>
          <th scope="col">種別</th>
          <th scope="col">住所</th>
          <th scope="col">開館時間</th>
          <th scope="col">休館日</th>
          <th scope="col">トイレ</th>
          <th scope="col">給水</th>
          <th scope="col">備考</th>
        </tr>
      </thead>
      <tbody>
        {facilities.map((f) => (
          <tr
            data-fac-row
            data-type={f.type}
            data-toilet={f.toilet || ""}
            data-water={f.water || ""}
            data-search={`${f.name} ${f.type} ${f.address} ${f.city || ""} ${f.note}`.toLowerCase()}
          >
            <td>
              {f.source ? (
                <a href={f.source} target="_blank" rel="noopener">{f.name}</a>
              ) : (
                f.name
              )}
              {f.nearby ? (
                <span class="fac-nearby" title="小平市外の施設">市外</span>
              ) : null}
            </td>
            <td>{f.type}</td>
            <td>
              <a href={mapsUrl(f)} target="_blank" rel="noopener">
                {f.address || "—"}
              </a>
            </td>
            <td>{f.hours || "未確認"}</td>
            <td>{f.closed || "未確認"}</td>
            <td
              class:list={[
                "fac-status",
                f.toilet === "○" ? "is-yes" : f.toilet === "×" ? "is-no" : "",
              ]}
            >{f.toilet || "未確認"}</td>
            <td
              class:list={[
                "fac-status",
                f.water === "○" ? "is-yes" : f.water === "×" ? "is-no" : "",
              ]}
            >{f.water || "未確認"}</td>
            <td>{f.note}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>

  <details class="fac-help">
    <summary>設備情報について</summary>
    <p class="fac-note">
      小平市の施設は、公共施設のためトイレを利用できます（○）。市外の近隣施設は情報がないため「未確認」としています。給水は公式ページに明記が少ないため「未確認」が多いです。最新の情報は各施設の公式ページで確認してください。市外施設の情報はOpenStreetMapによるもので、地図の位置は住所・名称からの概略です。
    </p>
  </details>
</div>

<script>
  const root = document.querySelector<HTMLElement>("[data-fac-root]");
  if (root) {
    const rows = Array.from(root.querySelectorAll<HTMLTableRowElement>("[data-fac-row]"));
    const search = root.querySelector<HTMLInputElement>("[data-fac-search]");
    const type = root.querySelector<HTMLSelectElement>("[data-fac-type]");
    const toilet = root.querySelector<HTMLInputElement>("[data-fac-toilet]");
    const water = root.querySelector<HTMLInputElement>("[data-fac-water]");
    const count = root.querySelector<HTMLElement>("[data-fac-count]");
    const apply = () => {
      const q = (search?.value || "").trim().toLowerCase();
      const t = type?.value || "";
      const needToilet = Boolean(toilet?.checked);
      const needWater = Boolean(water?.checked);
      let shown = 0;
      rows.forEach((row) => {
        const okType = !t || row.dataset.type === t;
        const okText = !q || (row.dataset.search || "").includes(q);
        const okToilet = !needToilet || row.dataset.toilet === "○";
        const okWater = !needWater || row.dataset.water === "○";
        const ok = okType && okText && okToilet && okWater;
        row.hidden = !ok;
        if (ok) shown += 1;
      });
      if (count) count.textContent = `${shown} / ${rows.length}件`;
    };
    search?.addEventListener("input", apply);
    type?.addEventListener("change", apply);
    toilet?.addEventListener("change", apply);
    water?.addEventListener("change", apply);
    apply();
  }
</script>

<style>
  .fac-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0.75rem 0;
    font-size: 0.9em;
  }
  .fac-controls label {
    display: flex;
    gap: 0.35rem;
    align-items: center;
  }
  .fac-controls input,
  .fac-controls select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 4px;
    background: var(--sl-color-bg);
    color: var(--sl-color-text);
  }
  .fac-count {
    color: var(--sl-color-gray-2);
    font-size: 0.85em;
  }
  .fac-table-wrap {
    overflow-x: auto;
  }
  .fac-table-wrap table {
    font-size: 0.85em;
  }
  .fac-status {
    text-align: center;
    white-space: nowrap;
  }
  .fac-status.is-yes {
    color: #1b5e20;
    font-weight: 700;
  }
  .fac-status.is-no {
    color: #b71c1c;
  }
  .fac-nearby {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: #6d4c41;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 0.08em;
    white-space: nowrap;
  }
  .fac-help {
    margin-top: 0.5rem;
    color: var(--sl-color-gray-2);
    font-size: 0.82em;
  }
  .fac-help summary {
    cursor: pointer;
    color: var(--sl-color-text-accent);
  }
  .fac-note {
    margin: 0.35rem 0 0;
  }
</style>