{% extends "base.html" %}
{% block title %}Preferencias — Casa Hunter FL{% endblock %}
{% block content %}

<h2 class="fw-bold mb-1" style="color:var(--primary)"><i class="fas fa-sliders-h me-2" style="color:var(--accent)"></i>Preferencias de Búsqueda</h2>
<p class="text-muted mb-4">Configura dónde y hasta cuánto buscar. La próxima búsqueda usará estos ajustes.</p>

<div class="row g-4">

  <!-- Presupuesto y Down Payment -->
  <div class="col-12 col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-dollar-sign me-2" style="color:var(--accent)"></i>Mi Presupuesto</h6>
        <form method="post">
          <input type="hidden" name="action" value="save_config">

          <label class="form-label small fw-bold">Precio máximo de compra (USD)</label>
          <div class="input-group mb-1">
            <span class="input-group-text">$</span>
            <input type="number" name="max_price" id="max_price_input" class="form-control form-control-lg fw-bold"
                   value="{{ max_price }}" min="50000" max="1000000" step="5000"
                   oninput="document.getElementById('price-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
          </div>
          <input type="range" class="form-range mb-1" min="50000" max="500000" step="5000" value="{{ max_price }}"
                 oninput="document.getElementById('max_price_input').value=this.value;document.getElementById('price-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
          <div class="d-flex justify-content-between text-muted" style="font-size:.7rem">
            <span>$50K</span><span>$250K</span><span>$500K</span>
          </div>
          <div class="text-center my-2 fw-bold" style="color:var(--accent)" id="price-display">${{ "{:,}".format(max_price) }}</div>

          <hr class="my-3">

          <label class="form-label small fw-bold">Down Payment disponible (USD)</label>
          <div class="input-group mb-1">
            <span class="input-group-text">$</span>
            <input type="number" name="down_payment" id="down_input" class="form-control form-control-lg fw-bold"
                   value="{{ down_payment }}" min="5000" max="500000" step="1000"
                   oninput="document.getElementById('dp-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
          </div>
          <input type="range" class="form-range mb-1" min="5000" max="200000" step="1000" value="{{ down_payment }}"
                 oninput="document.getElementById('down_input').value=this.value;document.getElementById('dp-display').textContent='$'+Number(this.value).toLocaleString('en-US')">
          <div class="text-center fw-bold mb-3" style="color:var(--accent)" id="dp-display">${{ "{:,}".format(down_payment) }}</div>

          <div class="bg-light rounded p-2 small mb-3">
            <i class="fas fa-calculator me-1"></i>
            Down del <strong id="pct-display">{{ ((down_payment / max_price) * 100)|round(1) }}%</strong> sobre precio máximo
          </div>

          <button type="submit" class="btn btn-primary w-100"><i class="fas fa-save me-2"></i>Guardar</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Agregar ciudad -->
  <div class="col-12 col-md-8">
    <div class="card mb-3">
      <div class="card-body">
        <h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-plus-circle me-2" style="color:var(--accent)"></i>Agregar Ciudad</h6>
        <form method="post" class="d-flex gap-2">
          <input type="hidden" name="action" value="add_city">
          <div class="flex-fill position-relative">
            <input type="text" name="city" id="city-input" class="form-control"
                   placeholder="Escribe una ciudad de Florida..." autocomplete="off" required>
            <ul id="city-suggestions" class="list-group position-absolute w-100 shadow-sm"
                style="z-index:1000;display:none;max-height:200px;overflow-y:auto;top:100%"></ul>
          </div>
          <button type="submit" class="btn btn-accent"><i class="fas fa-plus me-1"></i>Agregar</button>
        </form>
        <p class="text-muted small mt-2 mb-0"><i class="fas fa-info-circle me-1"></i>Puedes agregar cualquier ciudad de Florida — Vero Beach, Palm Coast, Ponte Vedra, etc.</p>
      </div>
    </div>

    <!-- Cities list -->
    <div class="card">
      <div class="card-body">
        <h6 class="fw-bold mb-3" style="color:var(--primary)">
          <i class="fas fa-map-marker-alt me-2" style="color:var(--accent)"></i>
          Ciudades en tu búsqueda
          <span class="badge ms-1" style="background:var(--accent)">{{ cities|selectattr('active')|list|length }} activas</span>
        </h6>
        {% if cities %}
        <div class="row g-2">
          {% for c in cities %}
          <div class="col-12 col-sm-6 col-md-4">
            <div class="d-flex align-items-center justify-content-between border rounded px-3 py-2 {% if not c.active %}opacity-50{% endif %}">
              <div>
                <i class="fas fa-map-pin me-2 {% if c.active %}text-success{% else %}text-muted{% endif %}"></i>
                <span class="small fw-bold">{{ c.city }}</span>
              </div>
              <div class="d-flex gap-1">
                <form method="post" class="d-inline">
                  <input type="hidden" name="action" value="toggle_city">
                  <input type="hidden" name="city_id" value="{{ c.id }}">
                  <button type="submit" class="btn btn-xs p-1 border-0 bg-transparent" title="{% if c.active %}Desactivar{% else %}Activar{% endif %}">
                    <i class="fas fa-{% if c.active %}eye{% else %}eye-slash{% endif %} text-muted" style="font-size:.8rem"></i>
                  </button>
                </form>
                <form method="post" class="d-inline" onsubmit="return confirm('¿Eliminar {{ c.city }}?')">
                  <input type="hidden" name="action" value="remove_city">
                  <input type="hidden" name="city_id" value="{{ c.id }}">
                  <button type="submit" class="btn btn-xs p-1 border-0 bg-transparent">
                    <i class="fas fa-times text-danger" style="font-size:.8rem"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-muted">No hay ciudades configuradas.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Quick add coastal cities -->
<div class="card mt-4">
  <div class="card-body">
    <h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-water me-2" style="color:var(--accent)"></i>Agregar rápido — Ciudades costeras populares</h6>
    <div class="d-flex flex-wrap gap-2">
      {% set quick_cities = ["Vero Beach","Sebastian","Melbourne","Cocoa Beach","Titusville","Stuart","Jensen Beach",
        "Daytona Beach","Ormond Beach","New Smyrna Beach","Flagler Beach","Palm Coast",
        "St. Augustine","St. Augustine Beach","Ponte Vedra Beach",
        "Jacksonville Beach","Atlantic Beach","Neptune Beach","Fernandina Beach",
        "Port St. Lucie","Fort Pierce","Palm City","Hobe Sound"] %}
      {% for qc in quick_cities %}
        {% set already = cities|selectattr('city','equalto',qc)|list %}
        {% if not already %}
        <form method="post" class="d-inline">
          <input type="hidden" name="action" value="add_city">
          <input type="hidden" name="city" value="{{ qc }}">
          <button type="submit" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-plus me-1" style="font-size:.7rem"></i>{{ qc }}
          </button>
        </form>
        {% else %}
        <span class="btn btn-sm btn-success disabled" style="font-size:.8rem">
          <i class="fas fa-check me-1"></i>{{ qc }}
        </span>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
const input = document.getElementById('city-input');
const suggestions = document.getElementById('city-suggestions');

input.addEventListener('input', async function() {
  const q = this.value.trim();
  if (q.length < 2) { suggestions.style.display='none'; return; }
  const res = await fetch(`/api/cities?q=${encodeURIComponent(q)}`);
  const cities = await res.json();
  suggestions.innerHTML = '';
  if (cities.length === 0) { suggestions.style.display='none'; return; }
  cities.forEach(city => {
    const li = document.createElement('li');
    li.className = 'list-group-item list-group-item-action py-2 small';
    li.textContent = city + ', FL';
    li.style.cursor = 'pointer';
    li.addEventListener('click', () => {
      input.value = city;
      suggestions.style.display = 'none';
    });
    suggestions.appendChild(li);
  });
  suggestions.style.display = 'block';
});

document.addEventListener('click', e => {
  if (!input.contains(e.target)) suggestions.style.display = 'none';
});
</script>
{% endblock %}