{% extends "base.html" %}
{% block title %}IT Dashboard{% endblock %}
{% block page_title %}IT Operations Dashboard{% endblock %}

{% block content %}
<!-- Stats -->
<div class="row g-3 mb-4">
  {% set stat_items = [
    ('open', open_count, 'bi-circle', 'var(--info)', 'rgba(96,165,250,.1)', 'Open'),
    ('in_progress', in_progress_count, 'bi-arrow-repeat', 'var(--accent3)', 'rgba(0,180,216,.1)', 'In Progress'),
    ('pending', pending_count, 'bi-hourglass-split', 'var(--warning)', 'rgba(251,191,36,.1)', 'Pending'),
    ('resolved', resolved_count, 'bi-check2-circle', 'var(--success)', 'rgba(45,212,191,.1)', 'Resolved'),
  ] %}
  {% for status, count, icon, color, bg, label in stat_items %}
  <div class="col-6 col-xl-3">
    <a href="{{ url_for('admin.all_tickets', status=status) }}" style="text-decoration:none;">
      <div class="stat-card">
        <div class="stat-icon" style="background:{{ bg }};color:{{ color }};">
          <i class="bi {{ icon }}"></i>
        </div>
        <div>
          <div class="stat-value" style="color:{{ color }};">{{ count }}</div>
          <div class="stat-label">{{ label }}</div>
        </div>
      </div>
    </a>
  </div>
  {% endfor %}
</div>

<div class="row g-4">
  <!-- Assigned to me -->
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-person-check me-2"></i>Assigned to Me</span>
        <a href="{{ url_for('admin.all_tickets', assigned='me') }}" style="font-size:12px;color:var(--accent3);">View all →</a>
      </div>
      <div class="card-body p-0">
        {% if my_tickets %}
        <table class="table mb-0">
          <thead><tr><th>Ticket #</th><th>Title</th><th>Priority</th><th>Status</th></tr></thead>
          <tbody>
            {% for t in my_tickets %}
            <tr style="cursor:pointer;" onclick="window.location='/tickets/{{ t.id }}'">
              <td><span class="mono" style="font-size:11px;color:var(--accent3);">{{ t.ticket_number }}</span></td>
              <td style="font-size:13px;">{{ t.title[:40] }}{% if t.title|length>40 %}…{% endif %}</td>
              <td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
              <td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
          <div class="p-4 text-center" style="color:var(--muted);font-size:13px;"><i class="bi bi-inbox" style="font-size:28px;display:block;margin-bottom:8px;"></i>No tickets assigned to you.</div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Recent tickets -->
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-clock-history me-2"></i>Recent Tickets</span>
        <a href="{{ url_for('admin.all_tickets') }}" style="font-size:12px;color:var(--accent3);">All tickets →</a>
      </div>
      <div class="card-body p-0">
        <table class="table mb-0">
          <thead><tr><th>Ticket #</th><th>User</th><th>Priority</th><th>Status</th><th>Assignee</th></tr></thead>
          <tbody>
            {% for t in recent_tickets %}
            <tr style="cursor:pointer;" onclick="window.location='/tickets/{{ t.id }}'">
              <td><span class="mono" style="font-size:11px;color:var(--accent3);">{{ t.ticket_number }}</span></td>
              <td style="font-size:13px;">{{ t.creator.full_name.split()[0] }}</td>
              <td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
              <td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
              <td style="font-size:12px;color:var(--muted);">
                {% if t.assignee %}
                  <span title="{{ t.assignee.full_name }}">{{ t.assignee.full_name.split()[0] }}</span>
                {% else %}
                  <span style="color:var(--muted);font-style:italic;">Unassigned</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Quick links -->
<div class="row g-3 mt-1">
  <div class="col-12">
    <div class="card">
      <div class="card-header"><i class="bi bi-lightning-charge me-2"></i>Quick Actions</div>
      <div class="card-body d-flex flex-wrap gap-2">
        <a href="{{ url_for('admin.all_tickets', status='open') }}" class="btn btn-outline-primary btn-sm"><i class="bi bi-circle me-1"></i>Open Queue</a>
        <a href="{{ url_for('admin.all_tickets', assigned='unassigned') }}" class="btn btn-secondary btn-sm"><i class="bi bi-person-x me-1"></i>Unassigned</a>
        <a href="{{ url_for('admin.kb_new') }}" class="btn btn-secondary btn-sm"><i class="bi bi-plus-circle me-1"></i>New KB Article</a>
        {% if current_user.is_admin %}
        <a href="{{ url_for('admin.users') }}" class="btn btn-secondary btn-sm"><i class="bi bi-people me-1"></i>Manage Users</a>
        <a href="{{ url_for('admin.activity_logs') }}" class="btn btn-secondary btn-sm"><i class="bi bi-list-ul me-1"></i>Activity Logs</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}