---
// 地域センター・公民館・図書館・市役所支所・文化施設の一覧。
// トイレは市の公共施設として基本的に利用できる。給水は公式ページに明記が少ないため「未確認」が多い。
import facilitiesData from "@/data/kodaira-facilities.json";

type Facility = {
  name: string;
  type: string;
  address: string;
  hours: string;
  closed: string;
  toilet: string;
  water: string;
  note: string;
  source: string;
};

const facilities = facilitiesData as Facility[];
const types = ["地域センター", "公民館", "図書館", "市役所支所", "文化施設"];
const mapsUrl = (name: string) =>
  `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`小平市${name}`)}`;
---

<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.note}`.toLowerCase()}
          >
            <td>
              {f.source ? (
                <a href={f.source} target="_blank" rel="noopener">{f.name}</a>
              ) : (
                f.name
              )}
            </td>
            <td>{f.type}</td>
            <td>
              <a href={mapsUrl(f.name)} 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>

  <p class="fac-note">
    トイレは市の公共施設として基本的に利用できます（○）。給水は公式ページに明記が少ないため「未確認」が多いです。最新の情報は各施設の公式ページで確認してください。地図の位置は住所・名称からの概略です。
  </p>
</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-note {
    margin-top: 0.5rem;
    color: var(--sl-color-gray-2);
    font-size: 0.82em;
  }
</style>