{% extends "base.html" %}
{% block title %}Unplanted{% endblock %}
{% block content %}

<h1>Unplanted plants</h1>
<p class="form-help">
  Plants you've bought (or want to buy) but haven't put in the ground yet.
  Use this for layout planning — drop them into an area in
  <a href="/">layout mode</a> to see where they'd fit, then hit
  <strong>Mark as planted</strong> when you actually plant them.
</p>

<div class="unplanted-tabs">
  <a href="/unplanted?tab=unplanted"
     class="unplanted-tab{% if tab == 'unplanted' %} active{% endif %}">
    Unplanted <span class="unplanted-tab-count">{{ unplanted|length }}</span>
  </a>
  <a href="/unplanted?tab=idea"
     class="unplanted-tab{% if tab == 'idea' %} active{% endif %}">
    Ideas <span class="unplanted-tab-count">{{ ideas|length }}</span>
  </a>
</div>

<section class="section unplanted-quick-add">
  <h2>+ Add {% if tab == 'idea' %}an idea{% else %}an unplanted plant{% endif %}</h2>
  <form method="post" action="/unplanted" class="unplanted-add-form">
    <input type="hidden" name="status" value="{{ tab }}">
    <label>
      Species
      <span class="field-with-add">
        <select name="species_id" class="species-select" required>
          <option value="">—</option>
          {% for s in species_list %}
          <option value="{{ s.id }}">{{ s.name }}</option>
          {% endfor %}
        </select>
        <button type="button" class="add-inline-btn" data-add-type="species" title="New species">+</button>
      </span>
    </label>
    <label>
      Variety
      <span class="field-with-add">
        <select name="variety_id" class="variety-select">
          <option value="">—</option>
          {% for v in varieties_list %}
          <option value="{{ v.id }}" data-species-id="{{ v.species_id or '' }}">{{ v.name }}{% if v.species_name %} <span class="meta small">({{ v.species_name }})</span>{% endif %}</option>
          {% endfor %}
        </select>
        <button type="button" class="add-inline-btn" data-add-type="variety" title="New variety">+</button>
      </span>
    </label>
    <label>
      Quantity
      <input type="number" name="quantity" min="1" value="1" inputmode="numeric">
    </label>
    <label>
      Source
      <input type="text" name="source" placeholder="e.g. nursery, indoor seed, gift">
    </label>
    <label>
      Notes
      <input type="text" name="notes" placeholder="optional">
    </label>
    <button type="submit" class="btn primary">Add</button>
  </form>
</section>

<!-- Inline modal for creating species or variety from the quick-add form. -->
<div id="inline-modal" class="inline-modal" hidden>
  <div class="inline-modal-content">
    <h3 id="inline-modal-title">New</h3>
    <label id="inline-modal-species-label" class="modal-hidden">
      <span>Species</span>
      <select id="inline-modal-species-select"></select>
    </label>
    <label>
      <span>Name</span>
      <input type="text" id="inline-modal-name" placeholder="Name" autocomplete="off">
    </label>
    <div class="inline-modal-actions">
      <button type="button" id="inline-modal-save" class="btn primary small">Add</button>
      <button type="button" id="inline-modal-cancel" class="btn ghost small">Cancel</button>
    </div>
  </div>
</div>

{%- set current = unplanted if tab == 'unplanted' else ideas -%}

<section class="section">
  <h2>{% if tab == 'unplanted' %}Unplanted{% else %}Ideas{% endif %} list ({{ current|length }})</h2>

  {% if not current %}
  <p class="meta">
    Nothing here yet.
    {% if tab == 'unplanted' %}
    Add plants above that you've purchased or seeded but haven't planted in the
    ground yet.
    {% else %}
    Add idea plants above for future planning — these don't need to physically
    exist.
    {% endif %}
  </p>
  {% else %}
  <div class="unplanted-list">
    {% for p in current %}
    <div class="unplanted-card unplanted-card-status-{{ p.status }}">
      <div class="unplanted-card-main">
        <span class="unplanted-card-qty">{{ p.quantity or '?' }}×</span>
        <span class="unplanted-card-name">
          {% if p.variety_name %}<strong>{{ p.variety_name }}</strong>{% endif %}
          {% if p.species_name %}<span class="meta">{{ p.species_name }}</span>{% endif %}
          {% if not p.species_name and not p.variety_name %}<em>untyped</em>{% endif %}
        </span>
        {% if p.area_name %}
        <span class="unplanted-card-area">
          in <a href="/areas/{{ p.attached_area_id }}/layout">{{ p.area_name }}</a>
        </span>
        {% else %}
        <span class="unplanted-card-area meta"><em>not in any area</em></span>
        {% endif %}
      </div>
      {% if p.notes %}<div class="unplanted-card-notes meta">{{ p.notes }}</div>{% endif %}
      <div class="unplanted-card-actions">
        <a href="/plants/{{ p.id }}" class="btn ghost small">Open</a>
        <button type="button" class="btn small mark-planted-btn"
                data-plant-id="{{ p.id }}"
                data-plant-label="{{ p.quantity or '?' }}× {{ p.variety_name or p.species_name or 'plant' }}">
          ✓ Mark as planted
        </button>
        {% if p.status == 'idea' %}
        <form method="post" action="/plants/{{ p.id }}/set-pool-status" class="inline">
          <input type="hidden" name="status" value="unplanted">
          <input type="hidden" name="next" value="/unplanted?tab=idea">
          <button type="submit" class="btn ghost small" title="Promote: I've now bought / seeded this — it physically exists.">↑ Mark as unplanted</button>
        </form>
        {% else %}
        <form method="post" action="/plants/{{ p.id }}/set-pool-status" class="inline">
          <input type="hidden" name="status" value="idea">
          <input type="hidden" name="next" value="/unplanted?tab=unplanted">
          <button type="submit" class="btn ghost small" title="Demote: this is just a planning idea, not actually purchased / seeded yet.">↓ Mark as idea</button>
        </form>
        {% endif %}
        <form method="post" action="/plants/{{ p.id }}/delete" class="inline"
              onsubmit="return confirm('Delete this {{ p.status }} plant? This cannot be undone.');">
          <input type="hidden" name="next" value="/unplanted?tab={{ p.status }}">
          <button type="submit" class="btn danger small" title="Permanently delete this entry.">🗑 Delete</button>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</section>

{# Mark-as-planted dialog — opens via JS, lets user pick existing planting
   or create a new one on the spot. #}
<dialog id="mark-planted-dialog" class="mark-planted-dialog">
  <form method="post" id="mark-planted-form" class="mark-planted-form">
    <h3>Mark as planted</h3>
    <p class="meta" id="mark-planted-label">—</p>
    <input type="hidden" name="next" value="/unplanted?tab={{ tab }}">
    <div class="mark-planted-tabs">
      <label>
        <input type="radio" name="_mode" value="existing" checked>
        Add to an existing planting
      </label>
      <label>
        <input type="radio" name="_mode" value="new">
        Create a new planting
      </label>
    </div>
    <label class="mark-planted-existing">
      Planting
      <select name="planting_id" id="mark-planted-pid">
        <option value="">— pick one —</option>
        {% for pl in plantings %}
        <option value="{{ pl.id }}">{{ pl.name }}{% if pl.year_value %} ({{ pl.year_value }}){% endif %}</option>
        {% endfor %}
      </select>
    </label>
    <div class="mark-planted-new" hidden>
      <label>
        New planting name
        <input type="text" name="planting_name" id="mark-planted-name" placeholder="e.g. 2026 Tomatoes - May 14">
      </label>
      <label>
        Year
        <select name="year_id">
          <option value="">— none —</option>
        </select>
      </label>
    </div>
    <div class="mark-planted-actions">
      <button type="submit" class="btn primary">Mark as planted</button>
      <button type="button" class="btn ghost" id="mark-planted-cancel">Cancel</button>
    </div>
  </form>
</dialog>

{% endblock %}

{% block scripts %}
<script>
(function () {
  // Mark-as-planted dialog wiring.
  var dialog = document.getElementById('mark-planted-dialog');
  if (!dialog) return;
  var form = document.getElementById('mark-planted-form');
  var label = document.getElementById('mark-planted-label');
  var existingBlock = dialog.querySelector('.mark-planted-existing');
  var newBlock = dialog.querySelector('.mark-planted-new');
  var pidSelect = document.getElementById('mark-planted-pid');
  var nameInput = document.getElementById('mark-planted-name');

  document.querySelectorAll('.mark-planted-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var plantId = btn.dataset.plantId;
      var lbl = btn.dataset.plantLabel || '';
      form.action = '/plants/' + plantId + '/mark-planted';
      label.textContent = lbl;
      // Reset mode to "existing"
      var existingRadio = form.querySelector('input[name="_mode"][value="existing"]');
      if (existingRadio) existingRadio.checked = true;
      applyMode();
      dialog.showModal();
    });
  });

  function applyMode() {
    var mode = (form.querySelector('input[name="_mode"]:checked') || {}).value || 'existing';
    if (mode === 'new') {
      existingBlock.hidden = true;
      newBlock.hidden = false;
      pidSelect.removeAttribute('name');   // don't submit empty planting_id
      nameInput.setAttribute('name', 'planting_name');
    } else {
      existingBlock.hidden = false;
      newBlock.hidden = true;
      pidSelect.setAttribute('name', 'planting_id');
      nameInput.removeAttribute('name');
    }
  }
  form.querySelectorAll('input[name="_mode"]').forEach(function (r) {
    r.addEventListener('change', applyMode);
  });
  document.getElementById('mark-planted-cancel').addEventListener('click', function () {
    dialog.close();
  });

  // Filter varieties by selected species in quick-add form.
  var qaForm = document.querySelector('.unplanted-add-form');
  var spSel, vrSel;
  if (qaForm) {
    spSel = qaForm.querySelector('select[name="species_id"]');
    vrSel = qaForm.querySelector('select[name="variety_id"]');
    function filterVars() {
      var sid = spSel.value;
      Array.from(vrSel.options).forEach(function (opt) {
        if (!opt.value) { opt.hidden = false; return; }
        var optSid = opt.dataset.speciesId || '';
        opt.hidden = sid && optSid && optSid !== sid;
      });
      if (vrSel.selectedOptions[0] && vrSel.selectedOptions[0].hidden) {
        vrSel.value = '';
      }
    }
    spSel.addEventListener('change', filterVars);
    filterVars();
  }

  // Inline-add modal for new species / variety. Reuses the existing
  // /api/species + /api/varieties endpoints. On success, the new option is
  // appended to the quick-add select and pre-selected.
  var modal = document.getElementById('inline-modal');
  if (modal && qaForm) {
    var modalTitle  = document.getElementById('inline-modal-title');
    var modalName   = document.getElementById('inline-modal-name');
    var modalSave   = document.getElementById('inline-modal-save');
    var modalCancel = document.getElementById('inline-modal-cancel');
    var modalSpLbl  = document.getElementById('inline-modal-species-label');
    var modalSpSel  = document.getElementById('inline-modal-species-select');
    var currentAddType = null;

    function openAddModal(type) {
      currentAddType = type;
      modalName.value = '';
      if (type === 'species') {
        modalTitle.textContent = 'New species';
        modalSpLbl.classList.add('modal-hidden');
      } else {
        modalTitle.textContent = 'New variety';
        modalSpLbl.classList.remove('modal-hidden');
        // Build species select inside modal, preselect quick-add form's species.
        var sid = spSel ? (spSel.value || '') : '';
        modalSpSel.innerHTML = '<option value="">—</option>';
        Array.from(spSel.options).forEach(function (opt) {
          if (!opt.value) return;
          var clone = document.createElement('option');
          clone.value = opt.value;
          clone.textContent = opt.textContent;
          if (opt.value === sid) clone.selected = true;
          modalSpSel.appendChild(clone);
        });
      }
      modal.hidden = false;
      modalName.focus();
    }

    qaForm.querySelectorAll('.add-inline-btn').forEach(function (btn) {
      btn.addEventListener('click', function () { openAddModal(btn.dataset.addType); });
    });
    modalCancel.addEventListener('click', function () { modal.hidden = true; });
    modal.addEventListener('click', function (e) {
      if (e.target === modal) modal.hidden = true;
    });
    modalName.addEventListener('keydown', function (e) {
      if (e.key === 'Enter') { e.preventDefault(); modalSave.click(); }
      else if (e.key === 'Escape') { modal.hidden = true; }
    });
    modalSave.addEventListener('click', function () {
      var name = modalName.value.trim();
      if (!name) return;
      if (currentAddType === 'species') {
        fetch('/api/species', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({name: name}),
        }).then(function (r) { return r.json(); }).then(function (data) {
          var opt = document.createElement('option');
          opt.value = data.id;
          opt.textContent = data.name;
          spSel.appendChild(opt);
          spSel.value = data.id;
          spSel.dispatchEvent(new Event('change'));
          modal.hidden = true;
        });
      } else {
        var sid = modalSpSel.value ? parseInt(modalSpSel.value, 10) : null;
        fetch('/api/varieties', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({name: name, species_id: sid}),
        }).then(function (r) { return r.json(); }).then(function (data) {
          var opt = document.createElement('option');
          opt.value = data.id;
          opt.dataset.speciesId = data.species_id || '';
          opt.textContent = data.name;
          vrSel.appendChild(opt);
          // If a species was specified and it differs from the current one,
          // switch the quick-add form to it.
          if (data.species_id && spSel.value !== String(data.species_id)) {
            spSel.value = String(data.species_id);
            spSel.dispatchEvent(new Event('change'));
          }
          vrSel.value = data.id;
          modal.hidden = true;
        });
      }
    });
  }
})();
</script>
{% endblock %}