@extends('layouts.admin')

@section('title', 'Support Ticket Desk & Grievance Operations | Admin Portal')

@section('content')
<div class="admin-tickets-desk">
  <!-- Header Bar -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Support Desk & Inquiry Desk</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Multi-tenant support ticketing, SLA monitoring, and grievance resolution operations.</p>
    </div>
    <div style="display: flex; gap: 0.75rem;">
      <a href="{{ route('admin.tickets.export', request()->query()) }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-file-csv"></i> Export Queue CSV
      </a>
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
      <i class="fas fa-check-circle" style="margin-right: 0.5rem;"></i> {{ session('success') }}
    </div>
  @endif

  <!-- Operations KPI Grid -->
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
    <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(56, 189, 248, 0.1); color: #38bdf8; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-inbox"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">All Tickets</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading);">{{ $stats['total'] }}</h3>
      </div>
    </div>

    <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(245, 158, 11, 0.1); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-spinner"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">Active Queue</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading); color: #f59e0b;">{{ $stats['open_active'] }}</h3>
      </div>
    </div>

    <div class="admin-card" style="display: flex; align-items: center; gap: 1rem; border-color: {{ $stats['sla_breached'] > 0 ? 'rgba(239, 68, 68, 0.5)' : 'var(--border-light)' }};">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(239, 68, 68, 0.1); color: #ef4444; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-exclamation-triangle"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">SLA Breached</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading); color: #ef4444;">{{ $stats['sla_breached'] }}</h3>
      </div>
    </div>

    <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(16, 185, 129, 0.1); color: #10b981; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-calendar-check"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">Resolved Today</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading); color: #10b981;">{{ $stats['resolved_today'] }}</h3>
      </div>
    </div>
  </div>

  <!-- Filters Toolbar -->
  <div class="admin-card" style="margin-bottom: 1.5rem; padding: 1.25rem;">
    <form method="GET" action="{{ route('admin.tickets.index') }}" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: center;">
      <!-- Search Input -->
      <div>
        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search ticket #, name, email..." style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
      </div>

      <!-- Status Filter -->
      <div>
        <select name="status" class="form-control" onchange="this.form.submit()" style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
          <option value="">All Statuses</option>
          @foreach(\App\Models\Ticket::STATUSES as $key => $label)
            <option value="{{ $key }}" {{ request('status') === $key ? 'selected' : '' }}>{{ $label }}</option>
          @endforeach
        </select>
      </div>

      <!-- Priority Filter -->
      <div>
        <select name="priority" class="form-control" onchange="this.form.submit()" style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
          <option value="">All Priorities</option>
          @foreach(\App\Models\Ticket::PRIORITIES as $key => $label)
            <option value="{{ $key }}" {{ request('priority') === $key ? 'selected' : '' }}>{{ $label }}</option>
          @endforeach
        </select>
      </div>

      <!-- SLA Status Filter -->
      <div>
        <select name="sla" class="form-control" onchange="this.form.submit()" style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
          <option value="">All SLA Timers</option>
          <option value="breached" {{ request('sla') === 'breached' ? 'selected' : '' }}>🔴 SLA Breached</option>
          <option value="warning" {{ request('sla') === 'warning' ? 'selected' : '' }}>🟡 Due Soon (&lt; 3h)</option>
          <option value="healthy" {{ request('sla') === 'healthy' ? 'selected' : '' }}>🟢 On Track</option>
        </select>
      </div>

      <!-- Assigned Officer Filter -->
      <div>
        <select name="assigned_to" class="form-control" onchange="this.form.submit()" style="width: 100%; font-size: 0.88rem; padding: 0.6rem 0.85rem;">
          <option value="">All Assigned Staff</option>
          <option value="unassigned" {{ request('assigned_to') === 'unassigned' ? 'selected' : '' }}>[Unassigned]</option>
          @foreach($officers as $officer)
            <option value="{{ $officer->id }}" {{ request('assigned_to') == $officer->id ? 'selected' : '' }}>{{ $officer->name }}</option>
          @endforeach
        </select>
      </div>

      <!-- Buttons -->
      <div style="display: flex; gap: 0.5rem;">
        <button type="submit" class="btn btn-primary btn-sm" style="flex: 1; padding: 0.6rem;">
          <i class="fas fa-filter"></i> Apply
        </button>
        @if(request()->anyFilled(['search', 'status', 'priority', 'sla', 'assigned_to', 'category']))
          <a href="{{ route('admin.tickets.index') }}" class="btn btn-outline btn-sm" style="padding: 0.6rem;" title="Reset Filters">
            <i class="fas fa-rotate-left"></i>
          </a>
        @endif
      </div>
    </form>
  </div>

  <!-- Tickets Queue Table -->
  <div class="admin-card" style="padding: 0; overflow: hidden;">
    @if($tickets->isEmpty())
      <div style="padding: 4rem 2rem; text-align: center;">
        <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--bg-surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;">
          <i class="fas fa-clipboard-check"></i>
        </div>
        <h4 style="font-size: 1.15rem; margin-bottom: 0.5rem;">Queue is Clear</h4>
        <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 440px; margin: 0 auto;">No support tickets match the selected operational filters.</p>
      </div>
    @else
      <div class="table-responsive">
        <table class="admin-table">
          <thead>
            <tr>
              <th>Ticket #</th>
              <th>Submitter</th>
              <th>Subject & Category</th>
              <th>Priority</th>
              <th>Status</th>
              <th>SLA Status</th>
              <th>Assigned Officer</th>
              <th style="text-align: right;">Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($tickets as $ticket)
              <tr>
                <td style="font-family: var(--font-mono, monospace); font-weight: 700; color: #38bdf8; white-space: nowrap;">
                  #{{ $ticket->ticket_number }}
                </td>
                <td>
                  <div style="font-weight: 600; font-size: 0.92rem;">{{ $ticket->name }}</div>
                  <div style="font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem;">
                    <span class="badge" style="background: rgba(255,255,255,0.06); font-size: 0.7rem; padding: 0.15rem 0.4rem;">{{ ucfirst($ticket->role) }}</span>
                    <span>{{ $ticket->email }}</span>
                  </div>
                </td>
                <td style="max-width: 260px;">
                  <a href="{{ route('admin.tickets.show', $ticket->id) }}" style="font-weight: 600; color: var(--text-primary); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                    {{ $ticket->subject }}
                  </a>
                  <span style="font-size: 0.78rem; color: var(--text-muted);">
                    {{ $ticket->categoryLabel() }}
                  </span>
                </td>
                <td>
                  {!! $ticket->priorityBadgeHtml() !!}
                </td>
                <td>
                  {!! $ticket->statusBadgeHtml() !!}
                </td>
                <td>
                  {!! $ticket->slaBadgeHtml() !!}
                </td>
                <td>
                  @if($ticket->assignedOfficer)
                    <span style="display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--text-primary);">
                      <i class="fas fa-user-check" style="color: #10b981; font-size: 0.8rem;"></i> {{ $ticket->assignedOfficer->name }}
                    </span>
                  @else
                    <span style="color: #f59e0b; font-size: 0.82rem; font-style: italic;">
                      <i class="fas fa-user-clock"></i> Unassigned
                    </span>
                  @endif
                </td>
                <td style="text-align: right; white-space: nowrap;">
                  <a href="{{ route('admin.tickets.show', $ticket->id) }}" class="btn btn-primary btn-sm" style="padding: 0.35rem 0.75rem; font-size: 0.82rem;">
                    Manage <i class="fas fa-arrow-right" style="margin-left: 0.25rem;"></i>
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div style="padding: 1rem 1.25rem; border-top: 1px solid var(--border-light);">
        {{ $tickets->links('vendor.pagination.custom-simple') }}
      </div>
    @endif
  </div>
</div>
@endsection