/* ============================================================
   MNveg — app.js   (rendering, filtering, maps, guides)
   You shouldn't need to edit this file to add restaurants —
   that all happens in js/data.js.
   ============================================================ */

(function () {
  "use strict";

  const STATUS_LABEL = {
    "vegan": "Vegan",
    "vegetarian": "Vegetarian",
    "vegan-friendly": "Veg-Friendly"
  };
  const ALL_TAGS = ["breakfast", "alcohol", "delivery", "takeout", "dessert"];

  const byCity = (a, b) => a.city.localeCompare(b.city) || a.name.localeCompare(b.name);
  const esc = (s) => String(s).replace(/[&<>"]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));

  /* ---------- mobile nav ---------- */
  const toggle = document.querySelector(".nav-toggle");
  if (toggle) {
    toggle.addEventListener("click", () => {
      document.querySelector(".nav-links").classList.toggle("open");
    });
  }

  /* ---------- card markup ---------- */
  function mediaHTML(r) {
    if (r.image) return `<img src="${esc(r.image)}" alt="${esc(r.name)}" loading="lazy">`;
    const initial = r.name.trim().charAt(0).toUpperCase();
    return `<div class="card-placeholder" aria-hidden="true">${esc(initial)}</div>`;
  }
  function cardHTML(r) {
    const tags = (r.tags || []).map(t => `<span class="tag">${esc(t)}</span>`).join("");
    return `
      <a class='card' href='/restaurant?slug=${encodeURIComponent(r.slug)}'>
        <div class="card-media">
          <span class="status ${r.type}">${STATUS_LABEL[r.type] || r.type}</span>
          ${mediaHTML(r)}
        </div>
        <div class="card-body">
          <span class="card-city">${esc(r.city)}</span>
          <h3>${esc(r.name)}</h3>
          <p>${esc(r.desc)}</p>
          <div class="card-tags">${tags}</div>
        </div>
      </a>`;
  }

  /* ============================================================
     HOME PAGE  —  filters + grid
     ============================================================ */
  function initHome() {
    const grid = document.getElementById("card-grid");
    if (!grid) return;
    const data = window.RESTAURANTS || [];

    // build city dropdown
    const citySel = document.getElementById("city-select");
    const cities = [...new Set(data.map(r => r.city))].sort();
    cities.forEach(c => {
      const o = document.createElement("option");
      o.value = c; o.textContent = c; citySel.appendChild(o);
    });

    const state = { status: new Set(), tags: new Set(), city: "", q: "" };

    function matches(r) {
      if (state.status.size && !state.status.has(r.type)) return false;
      if (state.tags.size) {
        for (const t of state.tags) if (!(r.tags || []).includes(t)) return false; // AND
      }
      if (state.city && r.city !== state.city) return false;
      if (state.q) {
        const hay = (r.name + " " + r.desc + " " + r.city).toLowerCase();
        if (!hay.includes(state.q)) return false;
      }
      return true;
    }

    function render() {
      const list = data.filter(matches).sort(byCity);
      grid.innerHTML = list.length
        ? list.map(cardHTML).join("")
        : `<div class="empty"><h3>No spots match those filters.</h3><p>Try removing one, or clear all to see everything.</p></div>`;
      const count = document.getElementById("result-count");
      if (count) count.textContent = `${list.length} ${list.length === 1 ? "place" : "places"}`;
    }

    // chip groups
    document.querySelectorAll("[data-status]").forEach(chip => {
      chip.addEventListener("click", () => {
        const v = chip.dataset.status;
        chip.getAttribute("aria-pressed") === "true"
          ? (state.status.delete(v), chip.setAttribute("aria-pressed", "false"))
          : (state.status.add(v), chip.setAttribute("aria-pressed", "true"));
        render();
      });
    });
    document.querySelectorAll("[data-tag]").forEach(chip => {
      chip.addEventListener("click", () => {
        const v = chip.dataset.tag;
        chip.getAttribute("aria-pressed") === "true"
          ? (state.tags.delete(v), chip.setAttribute("aria-pressed", "false"))
          : (state.tags.add(v), chip.setAttribute("aria-pressed", "true"));
        render();
      });
    });
    citySel.addEventListener("change", () => { state.city = citySel.value; render(); });
    const search = document.getElementById("search");
    search.addEventListener("input", () => { state.q = search.value.trim().toLowerCase(); render(); });

    document.getElementById("clear-filters").addEventListener("click", () => {
      state.status.clear(); state.tags.clear(); state.city = ""; state.q = "";
      document.querySelectorAll('[aria-pressed="true"]').forEach(c => c.setAttribute("aria-pressed", "false"));
      citySel.value = ""; search.value = "";
      render();
    });

    render();
  }

  /* ============================================================
     DETAIL PAGE
     ============================================================ */
  function initDetail() {
    const root = document.getElementById("detail");
    if (!root) return;
    const slug = new URLSearchParams(location.search).get("slug");
    const r = (window.RESTAURANTS || []).find(x => x.slug === slug);
    if (!r) { root.innerHTML = `<div class="empty"><h3>Restaurant not found.</h3><p><a class='back-link' href='/'>&larr; Back to the directory</a></p></div>`; return; }

    document.title = `${r.name} — MNveg`;
    const tags = (r.tags || []).map(t => `<span class="tag">${esc(t)}</span>`).join("");
    const phone = r.phone ? `<li><span class="k">Phone</span><a href="tel:${esc(r.phone)}">${esc(r.phone)}</a></li>` : "";
    const web = r.website ? `<li><span class="k">Website</span><a href="https://${esc(r.website)}" target="_blank" rel="noopener">${esc(r.website)}</a></li>` : "";

    root.innerHTML = `
      <a class='back-link' href='/'>&larr; All restaurants</a>
      <div class="detail-grid" style="margin-top:18px">
        <div>
          <div class="detail-media"><span class="status ${r.type}" style="position:static;display:inline-block;margin:0 0 0 0">${STATUS_LABEL[r.type]}</span>${r.image ? `<img src="${esc(r.image)}" alt="${esc(r.name)}">` : `<div class="card-placeholder">${esc(r.name.charAt(0))}</div>`}</div>
        </div>
        <div>
          <span class="eyebrow">${esc(r.city)} &middot; ${STATUS_LABEL[r.type]}</span>
          <h1>${esc(r.name)}</h1>
          <p class="lead">${esc(r.desc)}</p>
          <ul class="detail-facts">
            <li><span class="k">Address</span><span>${esc(r.address)}</span></li>
            ${phone}${web}
            <li><span class="k">Good for</span><div class="card-tags" style="margin:0">${tags || "&mdash;"}</div></li>
          </ul>
          <div id="detail-map" style="margin-top:22px"></div>
        </div>
      </div>`;

    if (window.L && typeof r.lat === "number") {
      const map = L.map("detail-map", { scrollWheelZoom: false }).setView([r.lat, r.lng], 15);
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "&copy; OpenStreetMap", maxZoom: 19
      }).addTo(map);
      L.marker([r.lat, r.lng]).addTo(map).bindPopup(`<strong>${esc(r.name)}</strong>`);
    }
  }

  /* ============================================================
     MAP PAGE
     ============================================================ */
  function initMap() {
    const el = document.getElementById("map");
    if (!el || !window.L) return;
    const data = (window.RESTAURANTS || []).filter(r => typeof r.lat === "number");
    const map = L.map("map").setView([46.0, -93.6], 6); // centered on Minnesota
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "&copy; OpenStreetMap", maxZoom: 19
    }).addTo(map);

    const colors = { "vegan": "#143a2b", "vegetarian": "#9a6a1a", "vegan-friendly": "#7d8a86" };
    const bounds = [];
    data.forEach(r => {
      bounds.push([r.lat, r.lng]);
      const dot = L.divIcon({
        className: "",
        html: `<div style="width:16px;height:16px;border-radius:50%;background:${colors[r.type]};border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)"></div>`,
        iconSize: [16, 16], iconAnchor: [8, 8]
      });
      L.marker([r.lat, r.lng], { icon: dot }).addTo(map).bindPopup(
        `<div class="popup-status" style="color:${colors[r.type]}">${STATUS_LABEL[r.type]}</div>
         <strong>${esc(r.name)}</strong><br>${esc(r.city)}<br>
         <a href='/restaurant?slug=${encodeURIComponent(r.slug)}'>View details &rarr;</a>`
      );
    });
    if (bounds.length) map.fitBounds(bounds, { padding: [50, 50] });
  }

  /* ============================================================
     GUIDES
     ============================================================ */
  function initGuides() {
    const list = document.getElementById("guide-list");
    if (!list) return;
    const guides = (window.GUIDES || []).slice().sort((a, b) => b.date.localeCompare(a.date));
    list.innerHTML = guides.map(g => `
      <a class='guide-card' href='/guide?slug=${encodeURIComponent(g.slug)}'>
        <span class="date">${new Date(g.date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</span>
        <h2>${esc(g.title)}</h2>
        <p>${esc(g.excerpt)}</p>
      </a>`).join("");
  }
  function initGuide() {
    const root = document.getElementById("article");
    if (!root) return;
    const slug = new URLSearchParams(location.search).get("slug");
    const g = (window.GUIDES || []).find(x => x.slug === slug);
    if (!g) { root.innerHTML = `<h1>Guide not found</h1><p><a class='back-link' href='/guides'>&larr; All guides</a></p>`; return; }
    document.title = `${g.title} — MNveg`;
    const paras = g.body.split(/\n\s*\n/).map(p => `<p>${esc(p)}</p>`).join("");
    root.innerHTML = `
      <a class='back-link' href='/guides'>&larr; All guides</a>
      <span class="date" style="display:block;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)">${new Date(g.date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</span>
      <h1>${esc(g.title)}</h1>
      ${paras}`;
  }

  document.addEventListener("DOMContentLoaded", () => {
    initHome(); initDetail(); initMap(); initGuides(); initGuide();
  });
})();