{% extends 'base.html.twig' %}

{% block title %}Browse events — VINDN{% endblock %}

{% block head_extra %}
{% include '_datepicker_head.html.twig' %}
<style>
  .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
  .search-input-bar{ display:flex; gap:10px; margin-bottom:14px; }
  .search-input-bar input{ flex:1; min-width:0; padding:16px 20px; border:1px solid var(--line-strong); border-radius: var(--r-pill); font-size:15px; }
  .filter-label{
    display:block; font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--muted); margin:0 0 8px;
  }

  /* summary of what's active, under the search bar */
  .filter-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  .filter-bar .count{ display:inline-block; min-width:18px; padding:1px 6px; margin-left:4px; border-radius:var(--r-pill); background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:11px; text-align:center; }
  .filter-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--line-strong); border-radius:var(--r-pill); background:#fff; font-family:var(--f-mono); font-size:12px; color:var(--ink); }
  .filter-pill:hover{ border-color:var(--ink); }
  .filter-pill .x{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--paper-dim); font-size:13px; line-height:1; }
  .filter-clear-all{ font-family:var(--f-mono); font-size:12px; color:var(--accent); text-decoration:underline; margin-left:4px; }

  /* the filter popup */
  .filter-dialog{ width:min(640px, calc(100vw - 24px)); padding:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--r-card); background:var(--paper); color:var(--ink); }
  .filter-dialog::backdrop{ background:rgba(20,20,20,.25); backdrop-filter:blur(5px) saturate(0); -webkit-backdrop-filter:blur(5px) saturate(0); }

  /* Open/close transition. Opening uses @starting-style as the "from" state;
     closing adds .is-closing first (see the script) and only calls close()
     once the fade has finished, so it works without the newer
     display/overlay transition features. */
  .filter-dialog, .filter-dialog::backdrop{
    transition: opacity .22s ease, transform .22s ease, background-color .22s ease,
                backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
  }
  .filter-dialog.is-closing{ opacity:0; transform:translateY(14px) scale(.98); }
  .filter-dialog.is-closing::backdrop{ background-color:rgba(20,20,20,0); backdrop-filter:blur(0) saturate(1); -webkit-backdrop-filter:blur(0) saturate(1); }
  @starting-style{
    .filter-dialog[open]{ opacity:0; transform:translateY(14px) scale(.98); }
    .filter-dialog[open]::backdrop{ background-color:rgba(20,20,20,0); backdrop-filter:blur(0) saturate(1); -webkit-backdrop-filter:blur(0) saturate(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .filter-dialog, .filter-dialog::backdrop{ transition-duration:.01s; }
  }
  body:has(dialog[open]){ overflow:hidden; }
  .filter-dialog form{ display:flex; flex-direction:column; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); }
  .fd-head, .fd-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; }
  .fd-head{ border-bottom:1px solid var(--line); }
  .fd-head h2{ font-size:20px; margin:0; }
  .fd-close{ border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--ink); padding:0 4px; }
  .fd-body{ flex:1; overflow-y:auto; padding:20px 24px 8px; }
  .fd-foot{ border-top:1px solid var(--line); }
  .fd-section{ margin-bottom:24px; }
  .fd-section > .filter-label{ margin-bottom:10px; }
  .pick-row{ display:flex; flex-wrap:wrap; gap:8px; max-height:176px; overflow-y:auto; padding:2px; }
  .pick{ position:relative; cursor:pointer; }
  .pick input{ position:absolute; opacity:0; pointer-events:none; }
  .pick span{ display:inline-block; font-family:var(--f-mono); font-size:12px; padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft); white-space:nowrap; }
  .pick input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .pick input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
  .when-filter{ display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap; }
  .when-filter .chip-row-tight{ max-height:none; overflow:visible; }
  .when-filter button.chip-sm{ cursor:pointer; }
  .when-filter .date-range{ margin-top:0; }
  .location-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .location-filter input[type=text]{ min-width:0; flex:1 1 160px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-size:13px; }
  .location-filter select{ padding:7px 8px; border:1px solid var(--line-strong); border-radius:6px; font-family:var(--f-mono); font-size:12px; background:#fff; }
  .locate-status{ max-width:none; }
  .fd-link{ border:0; background:none; cursor:pointer; padding:0; color:var(--accent); text-decoration:underline; font-family:var(--f-mono); font-size:12px; }
  @media (max-width:560px){
    .fd-head, .fd-foot{ padding:14px 16px; }
    .fd-body{ padding:16px 16px 8px; }
  }
</style>
{% endblock %}

{% block body %}
  <section class="section" style="padding-bottom:0;">
    <div class="wrap">
      <p class="eyebrow" style="margin-bottom:10px;">All events</p>
      <div class="toolbar">
        <h1 style="font-size:clamp(28px,4vw,40px);">{{ q ? 'Searching: "' ~ q ~ '"' : "What's on" }}{{ activeCategory ? ' — ' ~ activeCategory : '' }}</h1>
        <div style="display:flex; align-items:center; gap:12px;">
          <p class="mono" style="font-size:13px; color:var(--muted); margin:0;">{{ total|de_number }} event{{ total == 1 ? '' : 's' }}</p>
          <label for="sortSelect" style="display:none;">Sort by</label>
          <select id="sortSelect" style="padding:7px 8px; border:1px solid var(--line-strong); border-radius:6px; font-family:var(--f-mono); font-size:12px; background:#fff;">
            <option value="soonest" data-href="{{ path('event_list', filters|merge({sort: 'soonest'})) }}" {{ 'soonest' == sort ? 'selected' : '' }}>Sort: Soonest</option>
            {% if hasLocation %}
              <option value="nearest" data-href="{{ path('event_list', filters|merge({sort: 'nearest'})) }}" {{ 'nearest' == sort ? 'selected' : '' }}>Sort: Nearest</option>
            {% endif %}
            <option value="az" data-href="{{ path('event_list', filters|merge({sort: 'az'})) }}" {{ 'az' == sort ? 'selected' : '' }}>Sort: A–Z</option>
            <option value="za" data-href="{{ path('event_list', filters|merge({sort: 'za'})) }}" {{ 'za' == sort ? 'selected' : '' }}>Sort: Z–A</option>
          </select>
        </div>
      </div>

      <form class="search-input-bar" method="get" action="{{ path('event_list') }}">
        {% if activeCategory %}<input type="hidden" name="category" value="{{ activeCategory }}">{% endif %}
        {% if dateFrom %}<input type="hidden" name="from" value="{{ dateFrom }}">{% endif %}
        {% if dateTo %}<input type="hidden" name="to" value="{{ dateTo }}">{% endif %}
        {% if hasLocation %}
          <input type="hidden" name="lat" value="{{ lat }}">
          <input type="hidden" name="lon" value="{{ lon }}">
          <input type="hidden" name="range" value="{{ rangeKm }}">
        {% endif %}
        <label for="q" style="display:none;">Search events</label>
        <input id="q" name="q" type="text" value="{{ q }}" placeholder="Search by event, artist or venue…">
        <button class="btn btn-primary" type="submit">Search</button>
      </form>

      {% set activeCount = (activeCategory ? 1 : 0) + (dateFrom or dateTo ? 1 : 0) + (hasLocation ? 1 : 0) %}
      <div class="filter-bar">
        <button type="button" class="btn btn-ghost btn-sm" id="openFilters" aria-haspopup="dialog">Filters{% if activeCount %}<span class="count">{{ activeCount }}</span>{% endif %}</button>
        {% if activeCategory %}
          <a class="filter-pill" href="{{ path('event_list', filters|merge({category: null})) }}" aria-label="Remove category filter {{ activeCategory }}">{{ activeCategory }}<span class="x" aria-hidden="true">×</span></a>
        {% endif %}
        {% if dateFrom or dateTo %}
          {% if dateFrom == today and dateTo == today %}{% set dateLabel = 'Today' %}
          {% elseif dateFrom == today and dateTo == weekEnd %}{% set dateLabel = 'Next 7 days' %}
          {% elseif dateFrom and dateTo and dateFrom == dateTo %}{% set dateLabel = dateFrom|date('d.m.Y') %}
          {% elseif dateFrom and dateTo %}{% set dateLabel = dateFrom|date('d.m.Y') ~ ' – ' ~ dateTo|date('d.m.Y') %}
          {% elseif dateFrom %}{% set dateLabel = 'From ' ~ dateFrom|date('d.m.Y') %}
          {% else %}{% set dateLabel = 'Until ' ~ dateTo|date('d.m.Y') %}{% endif %}
          <a class="filter-pill" data-forget="dates" href="{{ path('event_list', filters|merge({from: null, to: null})) }}" aria-label="Remove date filter {{ dateLabel }}">{{ dateLabel }}<span class="x" aria-hidden="true">×</span></a>
        {% endif %}
        {% if hasLocation %}
          <a class="filter-pill" id="locationPill" data-forget="location" data-lat="{{ lat }}" data-lon="{{ lon }}" href="{{ path('event_list', filters|merge({lat: null, lon: null, range: null})) }}" aria-label="Remove location filter"><span class="label">Within {{ rangeKm }} km of {{ lat|de_number(3) }}, {{ lon|de_number(3) }}</span><span class="x" aria-hidden="true">×</span></a>
        {% endif %}
        {% if activeCount %}
          <a class="filter-clear-all" data-forget="all" href="{{ path('event_list', {q: q ?: null, sort: filters.sort}) }}">Clear all</a>
        {% endif %}
      </div>
    </div>
  </section>

  <dialog class="filter-dialog" id="filterDialog" aria-labelledby="filterDialogTitle">
    <form method="get" action="{{ path('event_list') }}" id="filterForm">
      {% if q %}<input type="hidden" name="q" value="{{ q }}">{% endif %}
      {% if filters.sort %}<input type="hidden" name="sort" value="{{ filters.sort }}">{% endif %}
      <div class="fd-head">
        <h2 id="filterDialogTitle">Filters</h2>
        <button type="button" class="fd-close" id="closeFilters" aria-label="Close">×</button>
      </div>

      <div class="fd-body">
        <div class="fd-section">
          <span class="filter-label">Category</span>
          <div class="pick-row">
            <label class="pick"><input type="radio" name="category" value="" {{ activeCategory is null ? 'checked' : '' }}><span>All</span></label>
            {% for category in categories %}
              <label class="pick"><input type="radio" name="category" value="{{ category }}" {{ activeCategory == category ? 'checked' : '' }}><span>{{ category }}</span></label>
            {% endfor %}
          </div>
        </div>

        <div class="fd-section">
          <span class="filter-label">When</span>
          <div class="when-filter">
            <div class="chip-row-tight" id="datePresets">
              <button type="button" class="chip-sm" data-from="" data-to="">Any date</button>
              <button type="button" class="chip-sm" data-from="{{ today }}" data-to="{{ today }}">Today</button>
              <button type="button" class="chip-sm" data-from="{{ today }}" data-to="{{ weekEnd }}">Next 7 days</button>
            </div>
            <div class="date-range" role="group" aria-label="Date range">
              <label for="dateFrom">From</label>
              <input type="date" id="dateFrom" name="from" aria-label="From date" min="{{ today }}" value="{{ dateFrom }}">
              <label for="dateTo">to</label>
              <input type="date" id="dateTo" name="to" aria-label="To date" min="{{ today }}" value="{{ dateTo }}">
            </div>
          </div>
        </div>

        <div class="fd-section">
          <span class="filter-label">Near a location</span>
          <input type="hidden" name="lat" id="fLat" value="{{ hasLocation ? lat : '' }}">
          <input type="hidden" name="lon" id="fLon" value="{{ hasLocation ? lon : '' }}">
          <div class="location-filter">
            <label for="locationSearchInput" style="display:none;">Search a place</label>
            <input id="locationSearchInput" type="text" placeholder="Search a place…" autocomplete="off">
            <button class="btn btn-ghost btn-sm" type="button" id="locationGo">Go</button>
            <button type="button" class="btn btn-ghost btn-sm" id="useMyLocationBtn">Use my location</button>
            <label for="rangeSelect" style="display:none;">Radius</label>
            <select id="rangeSelect" name="range">
              {% for km in rangeOptions %}
                <option value="{{ km }}" {{ km == rangeKm ? 'selected' : '' }}>{{ km }} km</option>
              {% endfor %}
            </select>
            <button type="button" class="fd-link" id="clearLocation" {{ hasLocation ? '' : 'hidden' }}>clear</button>
          </div>
          <p class="locate-status" id="locationStatus">{% if hasLocation %}Within {{ rangeKm }} km of {{ lat|de_number(3) }}, {{ lon|de_number(3) }}{% endif %}</p>
        </div>
      </div>

      <div class="fd-foot">
        <button type="button" class="fd-link" id="resetFilters">Reset all</button>
        <button type="submit" class="btn btn-primary btn-sm">Show events</button>
      </div>
    </form>
  </dialog>

  <section class="section" style="padding-top:0;">
    <div class="wrap">
      <div class="card-grid">
        {% for event in events %}
          {% include 'events/_card.html.twig' with { event: event, dist: hasLocation ? distances[event.id]|default(null) : null } %}
        {% else %}
          <div class="no-results" style="grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--r-card);">
            <p class="eyebrow" style="margin-bottom:8px;">No events</p>
            <p>Nothing matches those filters yet — try clearing one, or check back once the importer has run.</p>
          </div>
        {% endfor %}
      </div>

      {% include '_pager.html.twig' with {
        currentPage: page,
        totalPages: totalPages,
        routeName: 'event_list',
        routeParams: filters
      } %}
    </div>
  </section>
{% endblock %}

{% block scripts %}
{% include '_datepicker_scripts.html.twig' %}
<script>
(function(){
  // Storage/search/GPS lookups live in window.VindnLocation (location.js)
  // and the range handling in window.VindnDates (dates.js), both loaded
  // globally in base.html.twig and shared with the home hero map and /map,
  // so a place or date range chosen on any of the three sticks when moving
  // between them.
  var dialog = document.getElementById('filterDialog');
  var form = document.getElementById('filterForm');
  var latEl = document.getElementById('fLat');
  var lonEl = document.getElementById('fLon');
  var placeInput = document.getElementById('locationSearchInput');
  var rangeSelect = document.getElementById('rangeSelect');
  var clearLocationBtn = document.getElementById('clearLocation');
  var statusEl = document.getElementById('locationStatus');
  var dateFrom = document.getElementById('dateFrom');
  var dateTo = document.getElementById('dateTo');

  var saved = window.VindnLocation.load();
  var savedDates = window.VindnDates.load();
  var search = window.location.search;

  // ---- popup open/close ----
  document.getElementById('openFilters').addEventListener('click', function () { dialog.showModal(); });

  // Fade out first, then close — and do the same for Esc (the native
  // "cancel") so every way of closing animates alike.
  function closeDialog() {
    if (!dialog.open || dialog.classList.contains('is-closing')) return;
    dialog.classList.add('is-closing');
    var finished = false;
    function finish() {
      if (finished) return;
      finished = true;
      dialog.classList.remove('is-closing');
      dialog.close();
    }
    dialog.addEventListener('transitionend', function onEnd(e) {
      if (e.target !== dialog) return;
      dialog.removeEventListener('transitionend', onEnd);
      finish();
    });
    setTimeout(finish, 400); // in case no transition runs (reduced motion, background tab)
  }
  document.getElementById('closeFilters').addEventListener('click', closeDialog);
  dialog.addEventListener('cancel', function (e) { e.preventDefault(); closeDialog(); });
  // a click on the backdrop lands on the <dialog> element itself
  dialog.addEventListener('click', function (e) { if (e.target === dialog) closeDialog(); });

  // ---- dates ----
  var setDates = window.VindnDates.bindInputs(dateFrom, dateTo, markPresets);
  var presets = document.querySelectorAll('#datePresets button');
  function markPresets() {
    presets.forEach(function (btn) {
      var on = btn.getAttribute('data-from') === dateFrom.value && btn.getAttribute('data-to') === dateTo.value;
      btn.classList.toggle('is-active', on);
    });
  }
  presets.forEach(function (btn) {
    btn.addEventListener('click', function () {
      setDates(btn.getAttribute('data-from'), btn.getAttribute('data-to'));
      markPresets();
    });
  });
  markPresets();

  // A range that arrived via the URL is remembered too, so the maps pick it
  // up like they would one chosen here.
  var urlDateFrom = {{ dateFrom|json_encode|raw }};
  var urlDateTo = {{ dateTo|json_encode|raw }};
  if (urlDateFrom || urlDateTo) window.VindnDates.save(urlDateFrom, urlDateTo);

  // ---- location ----
  var resolvedName = '';
  if (saved && latEl.value && Math.abs(saved.lat - parseFloat(latEl.value)) < 1e-4 && Math.abs(saved.lon - parseFloat(lonEl.value)) < 1e-4 && saved.name) {
    resolvedName = saved.name;
    placeInput.value = saved.name;
    // the summary pill can only show coordinates server-side
    var pillLabel = document.querySelector('#locationPill .label');
    if (pillLabel) pillLabel.textContent = 'Within ' + rangeSelect.value + ' km of ' + saved.name.split(',').slice(0, 2).join(',');
  }

  function setStatus(text, isError) {
    statusEl.textContent = text;
    statusEl.classList.toggle('is-error', !!isError);
  }
  function setLocation(lat, lon, name) {
    latEl.value = lat.toFixed(5);
    lonEl.value = lon.toFixed(5);
    placeInput.value = name || '';
    resolvedName = name || '';
    clearLocationBtn.hidden = false;
    setStatus('Found: ' + (name || lat.toFixed(3) + ', ' + lon.toFixed(3)), false);
  }
  function clearLocation() {
    latEl.value = '';
    lonEl.value = '';
    placeInput.value = '';
    resolvedName = '';
    clearLocationBtn.hidden = true;
    setStatus('', false);
  }
  function lookup(query, done) {
    window.VindnLocation.searchPlace(query, {
      onStart: function () { setStatus('Looking up "' + query + '"…', false); },
      onNotFound: function () { setStatus('Could not find "' + query + '"', true); },
      onFound: function (lat, lon, name) { setLocation(lat, lon, name); if (done) done(); },
      onError: function () { setStatus('Location search failed', true); }
    });
  }

  document.getElementById('locationGo').addEventListener('click', function () {
    var query = placeInput.value.trim();
    if (query) lookup(query);
  });
  // Enter in the place field looks the place up rather than applying the
  // whole popup half-finished.
  placeInput.addEventListener('keydown', function (e) {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    var query = placeInput.value.trim();
    if (query) lookup(query);
  });
  document.getElementById('useMyLocationBtn').addEventListener('click', function () {
    window.VindnLocation.useMyLocation({
      onUnsupported: function () { setStatus('Location not supported by your browser', true); },
      onStart: function () { setStatus('Finding you…', false); },
      onFound: setLocation,
      onError: function () { setStatus("Couldn't get your location", true); }
    });
  });
  clearLocationBtn.addEventListener('click', clearLocation);

  document.getElementById('resetFilters').addEventListener('click', function () {
    form.querySelector('input[name=category][value=""]').checked = true;
    setDates('', '');
    markPresets();
    clearLocation();
  });

  // ---- applying ----
  var submitting = false;
  form.addEventListener('submit', function (e) {
    if (submitting) return;
    // A place typed but never looked up ("Go" skipped): resolve it first.
    var typed = placeInput.value.trim();
    if (typed && typed !== resolvedName) {
      e.preventDefault();
      lookup(typed, function () { form.requestSubmit(); });
      return;
    }
    submitting = true;

    var range = window.VindnDates.normalize(dateFrom.value, dateTo.value);
    dateFrom.value = range.from || '';
    dateTo.value = range.to || '';
    window.VindnDates.save(range.from, range.to);

    if (latEl.value && lonEl.value) {
      window.VindnLocation.save(parseFloat(latEl.value), parseFloat(lonEl.value), resolvedName || null);
    } else {
      window.VindnLocation.clear();
      rangeSelect.disabled = true;
    }
    // keep the URL to what's actually set
    Array.prototype.forEach.call(form.elements, function (el) {
      if (el.name && el.type !== 'radio' && el.value === '') el.disabled = true;
    });
    var cat = form.querySelector('input[name=category]:checked');
    if (cat && cat.value === '') cat.disabled = true;
  });

  // Removing a filter via its pill must also forget it, otherwise the
  // restore-on-load check below would bring it straight back.
  document.querySelectorAll('[data-forget]').forEach(function (link) {
    link.addEventListener('click', function () {
      var what = link.getAttribute('data-forget');
      if (what === 'dates' || what === 'all') window.VindnDates.clear();
      if (what === 'location' || what === 'all') window.VindnLocation.clear();
    });
  });

  var sortSelect = document.getElementById('sortSelect');
  if (sortSelect) {
    sortSelect.addEventListener('change', function () {
      var opt = sortSelect.options[sortSelect.selectedIndex];
      window.location.href = opt.getAttribute('data-href');
    });
  }

  // A remembered place and date range from the home map or /map take over
  // here too — unless the URL already says something itself (an explicit
  // ?lat=, or any of from/to/when), which always wins, e.g. a shared link.
  // Both are restored in one redirect rather than two chained ones.
  var restoreLocation = saved && !/[?&]lat=/.test(search);
  var restoreDates = savedDates && !/[?&](from|to|when)=/.test(search);
  if (restoreLocation || restoreDates) {
    var restoreUrl = new URL(window.location.href);
    if (restoreLocation) {
      restoreUrl.searchParams.set('lat', saved.lat.toFixed(5));
      restoreUrl.searchParams.set('lon', saved.lon.toFixed(5));
      restoreUrl.searchParams.set('range', rangeSelect.value);
    }
    if (restoreDates) {
      if (savedDates.from) restoreUrl.searchParams.set('from', savedDates.from);
      if (savedDates.to) restoreUrl.searchParams.set('to', savedDates.to);
    }
    restoreUrl.searchParams.delete('page');
    window.location.href = restoreUrl.toString();
  }
})();
</script>
{% endblock %}