{# plants/templates/plants/identify_upload.html #}
{% extends "plants/base.html" %}
{% block title %}Identify plant — BloomBase{% endblock %}
{% block content %}

<div class="px-4 pt-6">

  <!-- Header -->
  <div class="flex items-center gap-3 mb-4">
    <a href="{% url 'dashboard' %}" class="btn-pill no-underline text-sm">←</a>
    <h1 class="font-nunito font-black text-[20px] text-[#1A1208]">Identify plant</h1>
  </div>

  <p class="font-nunito font-semibold text-[11px] text-[#B0A090] mb-4">
    Add one or more photos, tag what each shows, then tap Identify.
  </p>

  {% if error %}
  <div class="bg-orange-50 border border-orange-200 rounded-2xl px-4 py-3 font-nunito text-sm text-orange-700 mb-4">
    {{ error }}
  </div>
  {% endif %}

  <form method="post" enctype="multipart/form-data" id="identify-form">
    {% csrf_token %}
    <input type="file" name="images" accept="image/jpeg,image/png" class="hidden" id="file-picker">

    <!-- Viewfinder / drop zone -->
    <div class="relative bg-[#2C3820] rounded-2xl h-[140px] overflow-hidden mb-4" id="vf-box">
      <div class="absolute inset-0"
           style="background: radial-gradient(ellipse 60% 55% at 60% 45%, #C84060 0%, #E05878 30%, #F880A0 55%, transparent 75%),
                  linear-gradient(160deg, #1E3018 0%, #2E5028 30%, #3A6832 50%, #2C5020 70%);"></div>
      <div class="vf-corner vf-tl"></div>
      <div class="vf-corner vf-tr"></div>
      <div class="vf-corner vf-bl"></div>
      <div class="vf-corner vf-br"></div>
      <!-- Controls row -->
      <div class="absolute bottom-4 left-0 right-0 flex justify-center items-center gap-6">
        <label for="file-picker"
               class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center border border-white/40 cursor-pointer">
          <svg width="15" height="15" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24">
            <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/>
          </svg>
        </label>
        <label for="file-picker"
               class="bb-fab cursor-pointer">
        </label>
      </div>
    </div>

    <!-- Photo rows (populated by JS) -->
    <div id="photo-rows" class="mb-4"></div>

    <!-- Add more label (shown when < 5 photos) -->
    <div id="add-btn-wrap" class="mb-4">
      <label for="file-picker"
             class="flex items-center justify-center gap-2 bg-white border border-[#F0E4D4] rounded-2xl py-3
                    font-nunito font-bold text-sm text-[#B0A090] cursor-pointer">
        📷 Add photo <span id="photo-count" class="text-[#C0B0A0]"></span>
      </label>
    </div>

    <button type="submit" id="identify-btn" disabled
            class="btn-bloom opacity-50 cursor-not-allowed">
      Identify →
    </button>
  </form>

  <div class="text-center mt-4">
    <a href="{% url 'plant_add' %}" class="font-nunito text-sm font-semibold text-[#B0A090] no-underline">
      Or enter name manually
    </a>
  </div>

  <!-- Loading overlay -->
  <div id="identify-spinner"
       style="display:none; position:fixed; inset:0; background:rgba(255,248,242,.92); z-index:9999;
              align-items:center; justify-content:center; flex-direction:column; gap:16px;">
    <div style="width:40px;height:40px;border:3px solid #F0E4D4;border-top-color:#F07040;
                border-radius:50%;animation:spin .8s linear infinite;"></div>
    <p class="font-nunito font-bold text-sm text-[#B0A090]">Identifying plant…</p>
  </div>
  <style>@keyframes spin{to{transform:rotate(360deg)}}</style>

</div>

<script>
const ORGANS = [
  {val:'flower',label:'🌸 flower'},{val:'leaf',label:'🍃 leaf'},
  {val:'habit',label:'🌿 habit'},{val:'fruit',label:'🍎 fruit'},
  {val:'bark',label:'🪵 bark'},{val:'auto',label:'✨ auto'},
];
const selected = [];
const picker = document.getElementById('file-picker');

picker.addEventListener('change', function () {
  if (!this.files[0] || selected.length >= 5) return;
  selected.push({file: this.files[0], organ: 'auto', objectUrl: URL.createObjectURL(this.files[0])});
  this.value = '';
  render();
});

function setOrgan(idx, organ) { selected[idx].organ = organ; render(); }

function removePhoto(idx) {
  URL.revokeObjectURL(selected[idx].objectUrl);
  selected.splice(idx, 1);
  render();
}

function render() {
  const rows = document.getElementById('photo-rows');
  rows.innerHTML = '';
  selected.forEach((item, i) => {
    const row = document.createElement('div');
    row.className = 'flex gap-3 items-start mb-4';
    row.innerHTML = `
      <div style="position:relative;flex-shrink:0;">
        <img src="${item.objectUrl}" style="width:72px;height:72px;object-fit:cover;border-radius:14px;">
        <button type="button" onclick="removePhoto(${i})"
          style="position:absolute;top:3px;right:3px;background:rgba(0,0,0,.5);color:#fff;
                 border:none;border-radius:50%;width:20px;height:20px;font-size:10px;
                 cursor:pointer;padding:0;line-height:1;">✕</button>
      </div>
      <div style="flex:1;">
        <div style="font-family:Nunito,sans-serif;font-size:11px;font-weight:700;color:#B0A090;margin-bottom:6px;">What's shown?</div>
        <div style="display:flex;flex-wrap:wrap;gap:5px;">
          ${ORGANS.map(o=>`
            <span onclick="setOrgan(${i},'${o.val}')"
              style="cursor:pointer;padding:3px 10px;border-radius:20px;font-size:11px;font-family:Nunito,sans-serif;font-weight:700;
                     ${item.organ===o.val?'background:#F07040;color:#fff;':'background:#F5F0EA;color:#B0A090;'}">
              ${o.label}
            </span>`).join('')}
        </div>
        <input type="hidden" name="organs" value="${item.organ}" id="organ-${i}">
      </div>`;
    rows.appendChild(row);
  });

  document.querySelectorAll('input[name="organs"]').forEach((el,i)=>{
    if(selected[i]) el.value=selected[i].organ;
  });

  document.getElementById('photo-count').textContent = selected.length ? `(${selected.length}/5)` : '';
  document.getElementById('add-btn-wrap').style.display = selected.length >= 5 ? 'none' : '';
  const btn = document.getElementById('identify-btn');
  btn.disabled = selected.length === 0;
  btn.style.opacity = selected.length === 0 ? '0.5' : '1';
  btn.style.cursor = selected.length === 0 ? 'not-allowed' : 'pointer';
}

document.getElementById('identify-form').addEventListener('submit', function(e) {
  if (selected.length === 0) { e.preventDefault(); return; }
  const dt = new DataTransfer();
  selected.forEach(s => dt.items.add(s.file));
  picker.files = dt.files;
  document.getElementById('identify-spinner').style.display = 'flex';
});
</script>
{% endblock %}