{# plants/templates/plants/identify_confirm.html #}
{% extends "plants/base.html" %}
{% block title %}Confirm species — BloomBase{% endblock %}
{% block content %}

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

  <div class="flex items-center gap-3 mb-2">
    <a href="{% url 'identify_upload' %}" class="btn-pill no-underline text-sm">←</a>
    <h1 class="font-nunito font-black text-[20px] text-[#1A1208]">Is this your plant?</h1>
  </div>
  <p class="font-nunito font-semibold text-[11px] text-[#B0A090] mb-4">
    Tap the correct species, then confirm.
  </p>

  <form method="post" id="confirm-form">
    {% csrf_token %}
    <input type="hidden" name="match_idx" id="match_idx_input" value="0">

    <div class="flex flex-col gap-3 mb-5" id="match-list">
      {% for m in matches %}
      <div class="match-card flex items-center gap-3 bg-white rounded-2xl p-3 shadow-sm cursor-pointer
                  {% if forloop.first %}ring-2 ring-[#F07040]{% endif %}"
           data-idx="{{ forloop.counter0 }}"
           data-name="{{ m.scientific_name }}"
           onclick="selectMatch(this)">
        {% if m.image_url %}
        <img src="{{ m.image_url }}" alt="{{ m.scientific_name }}"
             class="w-16 h-16 rounded-xl flex-shrink-0 object-cover">
        {% else %}
        <div class="w-16 h-16 bg-[#D8F3DC] rounded-xl flex-shrink-0 flex items-center justify-center text-2xl">🌿</div>
        {% endif %}
        <div class="flex-1 min-w-0">
          <div class="font-nunito font-extrabold text-[13px] text-[#1A1208]">{{ m.scientific_name }}</div>
          {% if m.common_names %}
          <div class="font-nunito text-[10px] font-semibold text-[#B0A090] mt-0.5 truncate">
            {{ m.common_names|join:", " }}
          </div>
          {% endif %}
          <div class="font-nunito text-[10px] font-semibold text-[#B0A090] italic">{{ m.family }}</div>
        </div>
        <span class="font-nunito font-bold text-[11px] px-2 py-1 rounded-full flex-shrink-0
                     {% if m.score >= 0.70 %}bg-green-100 text-green-700
                     {% elif m.score >= 0.30 %}bg-orange-100 text-orange-700
                     {% else %}bg-gray-100 text-gray-500{% endif %}">
          {% widthratio m.score 1 100 %}%
        </span>
      </div>
      {% endfor %}
    </div>

    <!-- Plant name override -->
    <div class="mb-4">
      <label class="font-nunito font-bold text-[11px] text-[#B0A090] block mb-1">Plant name (optional)</label>
      <input type="text" name="plant_name" id="plant-name-input"
             class="w-full bg-white border border-[#F0E4D4] rounded-full px-4 py-2.5
                    font-nunito text-sm text-[#1A1208] placeholder-[#C0B0A0]
                    outline-none focus:border-[#F07040]"
             placeholder="Leave blank to use species name">
    </div>

    <!-- Location picker -->
    {% if locations %}
    <div class="mb-5">
      <label class="font-nunito font-bold text-[11px] text-[#B0A090] block mb-2">Add to area</label>
      <div class="flex flex-wrap gap-2">
        <input type="hidden" name="location_id" id="location-id-input" value="">
        {% for loc in locations %}
        <span class="location-chip font-nunito font-bold text-[11px] px-3 py-1.5 rounded-full
                     bg-[#F5F0EA] text-[#B0A090] cursor-pointer"
              data-id="{{ loc.pk }}"
              onclick="selectLocation(this)">
          {{ loc.name }}
        </span>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <button type="submit" class="btn-bloom">
      Add to my garden →
    </button>
  </form>

</div>

<script>
function selectMatch(card) {
  document.querySelectorAll('.match-card').forEach(c => c.classList.remove('ring-2', 'ring-[#F07040]'));
  card.classList.add('ring-2', 'ring-[#F07040]');
  document.getElementById('match_idx_input').value = card.dataset.idx;
  const nameInput = document.getElementById('plant-name-input');
  if (!nameInput.value || nameInput.dataset.autoSet) {
    nameInput.value = card.dataset.name;
    nameInput.dataset.autoSet = '1';
  }
}

function selectLocation(chip) {
  document.querySelectorAll('.location-chip').forEach(c => {
    c.classList.remove('bg-[#F07040]', 'text-white');
    c.classList.add('bg-[#F5F0EA]', 'text-[#B0A090]');
  });
  chip.classList.remove('bg-[#F5F0EA]', 'text-[#B0A090]');
  chip.classList.add('bg-[#F07040]', 'text-white');
  document.getElementById('location-id-input').value = chip.dataset.id;
}
</script>
{% endblock %}