{% extends "base.html" %}
{% from '_comments.html' import render_comments %}
{% from '_featured_image.html' import featured_image_block %}
{% from '_archive.html' import archive_button, archived_chip %}
{% block content %}
{# Recursive macro reused for the edit-mode checklist below. #}
{% macro render_area_nodes(nodes, selected) %}
<ul class="area-tree">
  {% for node in nodes %}
  <li>
    <label class="checkbox area-tree-row">
      <input type="checkbox" name="area_ids" value="{{ node.id }}"
             class="area-tree-cb"
             {% if node.id in selected %}checked{% endif %}
             {% if node.children %}data-has-children="1"{% endif %}>
      <span class="area-tree-name">{{ node.name }}</span>
      {% if node.children %}<span class="area-tree-count meta small">({{ node.children|length }} sub)</span>{% endif %}
    </label>
    {% if node.children %}
      {{ render_area_nodes(node.children, selected) }}
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endmacro %}

<nav class="breadcrumbs">
  <a href="/stations">Stations</a>
  <span class="sep">&rsaquo;</span>
  <span class="current">{{ station.name }}{{ archived_chip(station.is_archived) }}</span>
</nav>

{{ featured_image_block('station', station.id, station.featured_image_path, station.name) }}

<div class="zone-header">
  <h1>
    <span class="editable" data-entity="station" data-id="{{ station.id }}"
          data-field="name" data-type="text"
          data-current-value="{{ station.name }}">{{ station.name }}</span>
  </h1>
  <div class="zone-header-actions">
    {{ archive_button('station', station.id, station.is_archived, '/stations/' ~ station.id) }}
  </div>
</div>

<section class="section">
  <h2>Current timer schedule</h2>
  <div class="station-schedule-box">
    <span class="editable editable-block" data-entity="station" data-id="{{ station.id }}"
          data-field="current_schedule" data-type="textarea"
          data-current-value="{{ station.current_schedule or '' }}"
          data-placeholder="+ add">{{ station.current_schedule or '+ add' }}</span>
  </div>
</section>

<section class="section">
  <h2>Notes</h2>
  <div class="zone-detail-notes">
    <span class="editable editable-block" data-entity="station" data-id="{{ station.id }}"
          data-field="notes" data-type="textarea"
          data-current-value="{{ station.notes or '' }}"
          data-placeholder="+ add">{{ station.notes or '+ add' }}</span>
  </div>
</section>

<section class="section" id="station-areas-section">
  <h2>Areas served</h2>
  <div class="station-areas-edit-toggle">
    <button type="button" class="btn small ghost" id="station-areas-edit-btn">Edit areas served</button>
  </div>

  <div id="station-areas-view">
    {% if station_areas %}
    <ul class="station-area-list">
      {% for aid, path in station_areas %}
      <li><a href="/areas/{{ aid }}">{{ path }}</a></li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="empty small">No areas assigned. Click <em>Edit areas served</em> to attach areas.</p>
    {% endif %}
  </div>

  <div id="station-areas-checklist" class="area-tree-picker station-areas-checklist" hidden>
    {% if not areas_tree %}
    <p class="empty small">No areas defined yet. Add areas first, then come back to assign them.</p>
    {% else %}
    <p class="meta small">Check a parent area to auto-check all sub-areas. Uncheck any individual sub-area you want to exclude.</p>
    {{ render_area_nodes(areas_tree, selected_area_ids) }}
    <div class="form-actions">
      <button type="button" class="btn primary small" id="station-areas-save">Save</button>
      <button type="button" class="btn ghost small" id="station-areas-cancel">Cancel</button>
      <span id="station-areas-save-status" class="meta small"></span>
    </div>
    {% endif %}
  </div>
</section>

{{ render_comments(station_comments, 'station', station.id, '/stations/' ~ station.id, include_children=include_children, include_related=include_related, supports_children=supports_children) }}

<form method="post" action="/stations/{{ station.id }}/delete" class="danger-zone"
      onsubmit="return confirm('Delete station {{ station.name }}?');">
  <button type="submit" class="btn danger">Delete station</button>
</form>
{% endblock %}

{% block scripts %}
<script>
  (function () {
    var picker = document.getElementById('station-areas-checklist');
    var view = document.getElementById('station-areas-view');
    var editBtn = document.getElementById('station-areas-edit-btn');
    var saveBtn = document.getElementById('station-areas-save');
    var cancelBtn = document.getElementById('station-areas-cancel');
    var status = document.getElementById('station-areas-save-status');
    if (!picker || !editBtn) return;

    // Auto-check descendants when a parent is toggled (mirrors station_form.html).
    picker.addEventListener('change', function (ev) {
      var cb = ev.target;
      if (!(cb instanceof HTMLInputElement) || cb.type !== 'checkbox') return;
      if (!cb.classList.contains('area-tree-cb')) return;
      var li = cb.closest('li');
      if (!li) return;
      var descendants = li.querySelectorAll(':scope > ul .area-tree-cb');
      descendants.forEach(function (d) { d.checked = cb.checked; });
    });

    function show(el) { el.hidden = false; }
    function hide(el) { el.hidden = true; }

    editBtn.addEventListener('click', function () {
      hide(view);
      show(picker);
      hide(editBtn);
    });

    cancelBtn && cancelBtn.addEventListener('click', function () {
      // Restore checkbox state to whatever's currently shown in the view list.
      // Easiest: just reload the page (the URL hash takes us back to this section).
      location.reload();
    });

    saveBtn && saveBtn.addEventListener('click', async function () {
      var ids = Array.prototype.map.call(
        picker.querySelectorAll('.area-tree-cb:checked'),
        function (cb) { return parseInt(cb.value, 10); }
      ).filter(function (n) { return !isNaN(n); });
      saveBtn.disabled = true;
      status.textContent = 'Saving…';
      try {
        var r = await fetch('/api/station/{{ station.id }}/areas', {
          method: 'POST',
          credentials: 'same-origin',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({area_ids: ids}),
        });
        if (!r.ok) throw new Error('save failed (' + r.status + ')');
        status.textContent = 'Saved. Reloading…';
        setTimeout(function () { location.reload(); }, 300);
      } catch (e) {
        status.textContent = e.message || 'Save failed';
        saveBtn.disabled = false;
      }
    });
  })();
</script>
{% endblock %}