{% extends 'admin_pages/base_admin.html' %}
{% block title %}Dashboard | Admin Panel{% endblock %}

{% block content %}
<h1 class="fw-bold mb-3 display-6 text-capitalize">
  👋 Welcome back, <span class="text-primary">{{ user.get_full_name|default:user.username }}</span>
</h1>
<p class="text-muted fs-6">Last login: {{ last_login|date:"SHORT_DATETIME_FORMAT" }}</p>

<!-- Summary Cards with Modals Trigger -->
<div class="row g-4 mb-4">
  <div class="col-6 col-md-3">
    <div class="card shadow-sm border-0 bg-light h-100 cursor-pointer" data-bs-toggle="modal" data-bs-target="#addLogsModal">
      <div class="card-body text-center">
        <div class="text-success fs-1"><i class="fas fa-plus-circle"></i></div>
        <p class="mb-1 fw-semibold">Additions</p>
        <h5 class="mb-0">{{ action_summary.add }}</h5>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card shadow-sm border-0 bg-light h-100 cursor-pointer" data-bs-toggle="modal" data-bs-target="#changeLogsModal">
      <div class="card-body text-center">
        <div class="text-warning fs-1"><i class="fas fa-edit"></i></div>
        <p class="mb-1 fw-semibold">Changes</p>
        <h5 class="mb-0">{{ action_summary.change }}</h5>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card shadow-sm border-0 bg-light h-100 cursor-pointer" data-bs-toggle="modal" data-bs-target="#deleteLogsModal">
      <div class="card-body text-center">
        <div class="text-danger fs-1"><i class="fas fa-trash-alt"></i></div>
        <p class="mb-1 fw-semibold">Deletions</p>
        <h5 class="mb-0">{{ action_summary.delete }}</h5>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card shadow-sm border-0 bg-light h-100 cursor-pointer" data-bs-toggle="modal" data-bs-target="#sessionModal">
      <div class="card-body text-center">
        <div class="text-primary fs-1"><i class="fas fa-user-clock"></i></div>
        <p class="mb-1 fw-semibold">Active Sessions</p>
        <h5 class="mb-0">{{ active_sessions|length }}</h5>
      </div>
    </div>
  </div>
</div>

<!-- Recent Activity Table -->
<div class="card shadow-sm border-0">
  <div class="card-header bg-white fw-semibold">Recent Activity (Last 20 Actions)</div>
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th>Time</th>
          <th>User</th>
          <th>Action</th>
          <th>Model</th>
          <th>Object</th>
        </tr>
      </thead>
      <tbody>
        {% for log in user_logs %}
        <tr>
          <td>{{ log.action_time|date:"SHORT_DATETIME_FORMAT" }}</td>
          <td>{{ log.user.get_full_name|default:log.user.username }}</td>
          <td>
            {% if log.is_addition %}
              <span class="badge bg-success">Add</span>
            {% elif log.is_change %}
              <span class="badge bg-warning text-dark">Change</span>
            {% elif log.is_deletion %}
              <span class="badge bg-danger">Delete</span>
            {% endif %}
          </td>
          <td>{{ log.content_type.model|title }}</td>
          <td>{{ log.object_repr }}</td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="5" class="text-center text-muted">No recent activity.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Modal: Active Sessions -->
<div class="modal fade" id="sessionModal" tabindex="-1" aria-labelledby="sessionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="sessionModalLabel">Active Sessions</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% if active_sessions %}
        <ul class="list-group">
          {% for session in active_sessions %}
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>Session Key: <code>{{ session.session_key }}</code></span>
            <span class="text-muted">Expires: {{ session.expire_date|date:"SHORT_DATETIME_FORMAT" }}</span>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="text-muted">No active sessions found.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Modal: Add Logs -->
<div class="modal fade" id="addLogsModal" tabindex="-1" aria-labelledby="addLogsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Logs</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul class="list-group">
          {% for log in user_logs %}
            {% if log.is_addition %}
            <li class="list-group-item">
              <strong>{{ log.action_time|date:"SHORT_DATETIME_FORMAT" }}</strong> – Added <em>{{ log.content_type.model|title }}</em>: {{ log.object_repr }}
            </li>
            {% endif %}
          {% empty %}
          <li class="list-group-item text-muted">No Add logs found.</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal: Change Logs -->
<div class="modal fade" id="changeLogsModal" tabindex="-1" aria-labelledby="changeLogsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Change Logs</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul class="list-group">
          {% for log in user_logs %}
            {% if log.is_change %}
            <li class="list-group-item">
              <strong>{{ log.action_time|date:"SHORT_DATETIME_FORMAT" }}</strong> – Changed <em>{{ log.content_type.model|title }}</em>: {{ log.object_repr }}
            </li>
            {% endif %}
          {% empty %}
          <li class="list-group-item text-muted">No Change logs found.</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Modal: Delete Logs -->
<div class="modal fade" id="deleteLogsModal" tabindex="-1" aria-labelledby="deleteLogsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete Logs</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul class="list-group">
          {% for log in user_logs %}
            {% if log.is_deletion %}
            <li class="list-group-item">
              <strong>{{ log.action_time|date:"SHORT_DATETIME_FORMAT" }}</strong> – Deleted <em>{{ log.content_type.model|title }}</em>: {{ log.object_repr }}
            </li>
            {% endif %}
          {% empty %}
          <li class="list-group-item text-muted">No Delete logs found.</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>

{% endblock %}