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

{% block topbar_actions %}
<a href="{% url 'analytics:visitors_list' %}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i> Back to Visitor Logs</a>
{% endblock %}

{% block content %}
<div class="row g-4">

  <!-- Left: identity + device -->
  <div class="col-md-4">
    <div class="card mb-3">
      <div class="card-header fw-semibold"><i class="bi bi-person-circle me-1"></i> Identity</div>
      <div class="card-body">
        {% if profile.email or profile.name or profile.phone %}
          {% if profile.name %}<div class="mb-1"><strong>Name:</strong> {{ profile.name }}</div>{% endif %}
          {% if profile.email %}<div class="mb-1"><strong>Email:</strong> <a href="mailto:{{ profile.email }}">{{ profile.email }}</a></div>{% endif %}
          {% if profile.phone %}<div class="mb-1"><strong>Phone:</strong> {{ profile.phone }}</div>{% endif %}
        {% else %}
          <span class="text-muted fst-italic">Anonymous visitor — no contact details captured</span>
        {% endif %}

        {% if profile.converted and profile.lead %}
        <hr>
        <a href="{% url 'analytics:lead_detail' profile.lead.pk %}" class="btn btn-sm btn-success w-100">
          <i class="bi bi-person-check-fill me-1"></i> View Lead Record
        </a>
        {% endif %}
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-header fw-semibold"><i class="bi bi-globe me-1"></i> Connection</div>
      <div class="card-body small">
        <div class="mb-1"><strong>IP Address:</strong> <code>{{ profile.ip_address|default:"Unknown" }}</code></div>
        <div class="mb-1"><strong>Session:</strong> <code>{{ profile.session_key|truncatechars:16 }}</code></div>
        {% if profile.referrer %}
        <div class="mb-1"><strong>First Referrer:</strong><br><span class="text-break">{{ profile.referrer }}</span></div>
        {% else %}
        <div class="mb-1"><strong>First Referrer:</strong> Direct / None</div>
        {% endif %}
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-header fw-semibold"><i class="bi bi-display me-1"></i> Device</div>
      <div class="card-body small">
        <div class="mb-1"><strong>Type:</strong>
          {% if profile.device_type == 'Mobile' %}<i class="bi bi-phone text-primary"></i>
          {% elif profile.device_type == 'Tablet' %}<i class="bi bi-tablet text-info"></i>
          {% elif profile.device_type == 'Desktop' %}<i class="bi bi-display text-secondary"></i>
          {% endif %} {{ profile.device_type }}
        </div>
        <div class="mb-1"><strong>Browser:</strong> {{ profile.browser }}</div>
        <div class="mb-1"><strong>OS:</strong> {{ profile.os }}</div>
        {% if profile.user_agent %}
        <details class="mt-2">
          <summary class="text-muted" style="cursor:pointer">Full User-Agent</summary>
          <p class="mt-1 text-break small text-muted">{{ profile.user_agent }}</p>
        </details>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-header fw-semibold"><i class="bi bi-clock-history me-1"></i> Session Timeline</div>
      <div class="card-body small">
        <div class="mb-1"><strong>First seen:</strong> {{ profile.first_seen|date:"d M Y, H:i" }}</div>
        <div class="mb-1"><strong>Last seen:</strong> {{ profile.last_seen|date:"d M Y, H:i" }}</div>
        <div class="mb-1"><strong>Pages visited:</strong> {{ profile.pages_count }}</div>
        <div class="mt-2">
          {% if profile.converted %}
          <span class="badge bg-success fs-6"><i class="bi bi-check-circle-fill me-1"></i> Converted to Lead</span>
          {% else %}
          <span class="badge bg-secondary">Did not convert</span>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- Right: page journey -->
  <div class="col-md-8">
    <div class="card">
      <div class="card-header fw-semibold"><i class="bi bi-map me-1"></i> Page Journey ({{ page_visits.count }} recorded visits)</div>
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0 small">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Page</th>
              <th>Referrer</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            {% for visit in page_visits %}
            <tr>
              <td class="text-muted">{{ forloop.counter }}</td>
              <td>
                <a href="{{ visit.path }}" target="_blank" class="text-decoration-none">{{ visit.path }}</a>
              </td>
              <td class="text-muted text-truncate" style="max-width:160px;" title="{{ visit.referrer }}">
                {{ visit.referrer|default:"—"|truncatechars:50 }}
              </td>
              <td class="text-nowrap text-muted">{{ visit.visited_at|date:"d M H:i:s" }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center text-muted py-3">No page visits recorded for this session.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {% if profile.pages_list %}
    <div class="card mt-3">
      <div class="card-header fw-semibold"><i class="bi bi-list-ul me-1"></i> Stored Page List (last 30)</div>
      <div class="card-body">
        <ol class="mb-0 small">
          {% for page in profile.pages_list %}
          <li><a href="{{ page }}" target="_blank">{{ page }}</a></li>
          {% endfor %}
        </ol>
      </div>
    </div>
    {% endif %}
  </div>

</div>
{% endblock %}