{% extends 'admin_panel/base.html' %}
{% block title %}Visitor Logs{% endblock %}
{% block page_title %}Visitor Logs{% endblock %}

{% block content %}
<!-- Summary cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card text-center py-3">
      <div class="fs-3 fw-bold text-primary">{{ page_obj.paginator.count }}</div>
      <div class="small text-muted">Total Sessions</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card text-center py-3">
      <div class="fs-3 fw-bold text-success">{{ converted_count }}</div>
      <div class="small text-muted">Converted to Lead</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card text-center py-3">
      <div class="fs-3 fw-bold text-info">{{ identified }}</div>
      <div class="small text-muted">Identified Visitors</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card text-center py-3">
      <div class="fs-3 fw-bold text-warning">{{ total|add:"-"|add:converted_count }}</div>
      <div class="small text-muted">Anonymous Sessions</div>
    </div>
  </div>
</div>

<!-- Filters -->
<div class="card mb-4">
  <div class="card-body">
    <form method="get" class="row g-2 align-items-end">
      <div class="col-md-4">
        <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm" placeholder="Search email, name, phone, IP...">
      </div>
      <div class="col-md-2">
        <select name="converted" class="form-select form-select-sm">
          <option value="">All visitors</option>
          <option value="1" {% if converted == '1' %}selected{% endif %}>Converted</option>
          <option value="0" {% if converted == '0' %}selected{% endif %}>Not converted</option>
        </select>
      </div>
      <div class="col-md-2">
        <select name="device" class="form-select form-select-sm">
          <option value="">All devices</option>
          <option value="Desktop" {% if device == 'Desktop' %}selected{% endif %}>Desktop</option>
          <option value="Mobile" {% if device == 'Mobile' %}selected{% endif %}>Mobile</option>
          <option value="Tablet" {% if device == 'Tablet' %}selected{% endif %}>Tablet</option>
        </select>
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-sm btn-primary w-100">Filter</button>
      </div>
      {% if q or converted or device %}
      <div class="col-md-2">
        <a href="{% url 'analytics:visitors_list' %}" class="btn btn-sm btn-outline-secondary w-100">Clear</a>
      </div>
      {% endif %}
    </form>
  </div>
</div>

<!-- Table -->
<div class="card">
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle small">
      <thead class="table-light">
        <tr>
          <th>Identity</th>
          <th>IP Address</th>
          <th>Device</th>
          <th>Browser / OS</th>
          <th>Pages</th>
          <th>Referrer</th>
          <th>First Seen</th>
          <th>Last Seen</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for v in page_obj %}
        <tr>
          <td>
            {% if v.email %}
              <div class="fw-semibold">{{ v.name|default:"—" }}</div>
              <div class="text-muted">{{ v.email }}</div>
              {% if v.phone %}<div class="text-muted">{{ v.phone }}</div>{% endif %}
            {% elif v.name %}
              <div class="fw-semibold">{{ v.name }}</div>
              {% if v.phone %}<div class="text-muted">{{ v.phone }}</div>{% endif %}
            {% else %}
              <span class="text-muted fst-italic">Anonymous</span>
            {% endif %}
          </td>
          <td>
            <code>{{ v.ip_address|default:"—" }}</code>
          </td>
          <td>
            {% if v.device_type == 'Mobile' %}<i class="bi bi-phone text-primary"></i>
            {% elif v.device_type == 'Tablet' %}<i class="bi bi-tablet text-info"></i>
            {% elif v.device_type == 'Desktop' %}<i class="bi bi-display text-secondary"></i>
            {% else %}<i class="bi bi-question-circle text-muted"></i>{% endif %}
            {{ v.device_type }}
          </td>
          <td>
            <div>{{ v.browser }}</div>
            <div class="text-muted">{{ v.os }}</div>
          </td>
          <td>
            <span class="badge bg-secondary">{{ v.pages_count }}</span>
          </td>
          <td class="text-truncate" style="max-width:140px;" title="{{ v.referrer }}">
            {{ v.referrer|default:"Direct"|truncatechars:40 }}
          </td>
          <td class="text-nowrap">{{ v.first_seen|date:"d M H:i" }}</td>
          <td class="text-nowrap">{{ v.last_seen|date:"d M H:i" }}</td>
          <td>
            {% if v.converted %}
              <span class="badge bg-success">Lead</span>
            {% else %}
              <span class="badge bg-light text-dark border">Browsing</span>
            {% endif %}
          </td>
          <td>
            <a href="{% url 'analytics:visitor_detail' v.pk %}" class="btn btn-xs btn-outline-primary btn-sm py-0">Details</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="10" class="text-center text-muted py-4">No visitor sessions recorded yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.has_other_pages %}
  <div class="card-footer d-flex justify-content-between align-items-center">
    <small class="text-muted">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</small>
    <nav>
      <ul class="pagination pagination-sm mb-0">
        {% if page_obj.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&q={{ q }}&converted={{ converted }}&device={{ device }}">Previous</a></li>
        {% endif %}
        {% if page_obj.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&q={{ q }}&converted={{ converted }}&device={{ device }}">Next</a></li>
        {% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}