@extends('layouts.admin')

@section('title', 'Unified User Management')
@section('page-title', 'Platform User Management & Access Control')

@section('content')
<!-- Metric Summary Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 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: var(--radius-md); background: rgba(0, 102, 255, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-users-cog"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Total Accounts</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: var(--accent);">{{ $totalUsers }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.15); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-user-check"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Active Users</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: var(--success);">{{ $activeUsers }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(245, 158, 11, 0.15); color: #d97706; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-user-clock"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Pending Verification</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: #d97706;">{{ $pendingUsers }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.15); color: #ef4444; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-user-slash"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Suspended</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); display: block; color: #ef4444;">{{ $suspendedUsers }}</strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(14, 165, 233, 0.15); color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;">
      <i class="fas fa-briefcase"></i>
    </div>
    <div>
      <span style="font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600;">Jobseekers / Employers</span>
      <strong style="font-size: 1.4rem; font-family: var(--font-heading); display: block; color: #0284c7;">{{ $jobseekersCount }} / {{ $employersCount }}</strong>
    </div>
  </div>

</div>

<!-- Filter Toolbar & Table Card -->
<div class="admin-card">

  <form method="GET" action="{{ route('admin.users.index') }}" style="margin-bottom: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
      
      <!-- Role Filter Tabs -->
      <div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
        @php
          $roles = [
            'all' => 'All Roles',
            'jobseeker' => 'Jobseekers',
            'employer' => 'Employers',
            'district_officer' => 'District Officers',
            'admin' => 'Admins',
          ];
        @endphp
        @foreach($roles as $rKey => $rLabel)
          <a href="{{ route('admin.users.index', array_merge(request()->query(), ['role' => $rKey, 'page' => 1])) }}"
             class="btn {{ $currentRole === $rKey ? 'btn-primary' : 'btn-outline' }} btn-sm">
            {{ $rLabel }}
          </a>
        @endforeach
      </div>

      <!-- Action Buttons -->
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <a href="{{ route('admin.users.export', request()->query()) }}" class="btn btn-outline btn-sm" style="display: inline-flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-file-csv"></i> Export CSV
        </a>
        <a href="{{ route('admin.mail-centre.create') }}" class="btn btn-primary btn-sm" style="display: inline-flex; align-items: center; gap: 0.4rem;">
          <i class="fas fa-paper-plane"></i> Broadcast Email
        </a>
      </div>
    </div>

    <!-- Filter Inputs Row -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; align-items: center;">
      <!-- Search -->
      <div style="position: relative;">
        <input type="text" name="search" value="{{ $search }}" placeholder="Search name, email, phone, reg ID..."
               class="filter-select" style="width: 100%; height: 38px; padding-left: 2rem;">
        <i class="fas fa-search" style="position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 0.85rem;"></i>
      </div>

      <!-- Status -->
      <select name="status" class="filter-select" style="height: 38px;">
        <option value="all">All Account Statuses</option>
        <option value="active" {{ $currentStatus === 'active' ? 'selected' : '' }}>Active</option>
        <option value="pending" {{ $currentStatus === 'pending' ? 'selected' : '' }}>Pending</option>
        <option value="pending_verification" {{ $currentStatus === 'pending_verification' ? 'selected' : '' }}>Pending Verification</option>
        <option value="suspended" {{ $currentStatus === 'suspended' ? 'selected' : '' }}>Suspended</option>
      </select>

      <!-- District -->
      <select name="district" class="filter-select" style="height: 38px;">
        <option value="all">All Districts (Statewide)</option>
        @foreach($districts as $d)
          <option value="{{ $d->name }}" {{ $currentDistrict === $d->name ? 'selected' : '' }}>{{ $d->name }}</option>
        @endforeach
      </select>

      <!-- Date From -->
      <input type="date" name="date_from" value="{{ $dateFrom }}" class="filter-select" style="height: 38px;" title="Registered From">

      <!-- Date To -->
      <input type="date" name="date_to" value="{{ $dateTo }}" class="filter-select" style="height: 38px;" title="Registered To">

      <!-- Submit & Reset -->
      <div style="display: flex; gap: 0.4rem;">
        <button type="submit" class="btn btn-primary btn-sm" style="flex: 1; height: 38px;">
          <i class="fas fa-filter"></i> Filter
        </button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline btn-sm" style="height: 38px; display: inline-flex; align-items: center;" title="Reset filters">
          <i class="fas fa-undo"></i>
        </a>
      </div>
    </div>
  </form>

  @if (session('temporary_password'))
    <div style="background: rgba(16, 185, 129, 0.12); border-left: 4px solid var(--success); padding: 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem;">
      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <div>
          <strong style="color: var(--success); font-size: 1.05rem; display: block; margin-bottom: 0.25rem;">
            <i class="fas fa-check-circle"></i> Password Reset Generated
          </strong>
          <span style="color: var(--text-body); font-size: 0.9rem;">
            A one-time temporary password was assigned. User must change it upon next login:
          </span>
        </div>
        <div style="display: flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light);">
          <code id="tempPwdDisplay" style="font-size: 1.15rem; font-weight: 700; color: var(--accent); letter-spacing: 1px;">{{ session('temporary_password') }}</code>
          <button type="button" onclick="navigator.clipboard.writeText('{{ session('temporary_password') }}'); alert('Temporary password copied to clipboard!');"
                  class="btn btn-outline btn-sm" style="padding: 0.2rem 0.6rem; font-size: 0.8rem;" title="Copy to clipboard">
            <i class="fas fa-copy"></i> Copy
          </button>
        </div>
      </div>
    </div>
  @endif

  <!-- Users Table -->
  <div style="overflow-x: auto;">
    <table class="table" style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr style="border-bottom: 2px solid var(--border-light); text-align: left;">
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Account Identity</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Role</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">District</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Status</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Security Flags</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light);">Registered</th>
          <th style="padding: 0.85rem 0.75rem; font-size: 0.82rem; text-transform: uppercase; color: var(--text-light); text-align: right;">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($users as $user)
          <tr style="border-bottom: 1px solid var(--border-light); font-size: 0.9rem;">
            <!-- Identity -->
            <td style="padding: 0.85rem 0.75rem;">
              <div style="display: flex; align-items: center; gap: 0.75rem;">
                <div style="width: 38px; height: 38px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); font-size: 0.95rem;">
                  {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <div>
                  <a href="{{ route('admin.users.show', $user->id) }}" style="font-weight: 600; color: var(--text-heading); text-decoration: none;">
                    {{ $user->name }}
                  </a>
                  <div style="font-size: 0.8rem; color: var(--text-light);">
                    <span>{{ $user->email }}</span>
                    @if($user->registration_id)
                      • <code style="font-size: 0.75rem; color: var(--accent);">{{ $user->registration_id }}</code>
                    @endif
                  </div>
                </div>
              </div>
            </td>

            <!-- Role -->
            <td style="padding: 0.85rem 0.75rem;">
              @php
                $roleBadge = match($user->role) {
                  'super_admin', 'superadmin' => ['bg' => 'rgba(239, 68, 68, 0.15)', 'color' => '#dc2626', 'label' => 'Super Admin'],
                  'admin' => ['bg' => 'rgba(124, 58, 237, 0.15)', 'color' => '#7c3aed', 'label' => 'Admin'],
                  'district_officer' => ['bg' => 'rgba(14, 165, 233, 0.15)', 'color' => '#0284c7', 'label' => 'District Officer'],
                  'employer' => ['bg' => 'rgba(16, 185, 129, 0.15)', 'color' => '#059669', 'label' => 'Employer'],
                  default => ['bg' => 'rgba(0, 102, 255, 0.15)', 'color' => '#0284c7', 'label' => 'Jobseeker'],
                };
              @endphp
              <span class="badge" style="background: {{ $roleBadge['bg'] }}; color: {{ $roleBadge['color'] }}; font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);">
                {{ $roleBadge['label'] }}
              </span>
            </td>

            <!-- District -->
            <td style="padding: 0.85rem 0.75rem; color: var(--text-light);">
              {{ $user->assigned_district ?: ($user->jobseekerProfile?->district ?: ($user->employerProfile?->district ?: '—')) }}
            </td>

            <!-- Status -->
            <td style="padding: 0.85rem 0.75rem;">
              @if($user->status === 'active')
                <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);">
                  Active
                </span>
              @elseif($user->status === 'suspended')
                <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);" title="{{ $user->status_reason }}">
                  Suspended
                </span>
              @else
                <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #d97706; font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);">
                  {{ ucfirst(str_replace('_', ' ', $user->status)) }}
                </span>
              @endif
            </td>

            <!-- Security Flags -->
            <td style="padding: 0.85rem 0.75rem;">
              @if($user->must_change_password)
                <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #d97706; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm);" title="Must change password upon login">
                  <i class="fas fa-key"></i> Force Reset
                </span>
              @else
                <span style="color: var(--text-light); font-size: 0.75rem;">Normal</span>
              @endif
            </td>

            <!-- Registered Date -->
            <td style="padding: 0.85rem 0.75rem; color: var(--text-light); font-size: 0.85rem;">
              {{ $user->created_at ? $user->created_at->format('d M Y') : '—' }}
            </td>

            <!-- Actions -->
            <td style="padding: 0.85rem 0.75rem; text-align: right;">
              <div style="display: inline-flex; gap: 0.35rem; align-items: center;">
                <a href="{{ route('admin.users.show', $user->id) }}" class="btn btn-outline btn-sm" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;" title="View Profile & Inline Audit Log">
                  <i class="fas fa-eye"></i> View
                </a>

                <!-- Force Password Reset Form -->
                @if(Auth::id() !== $user->id)
                  <form method="POST" action="{{ route('admin.users.force-password-reset', $user->id) }}" data-ajax="true" style="display: inline;"
                        onsubmit="return confirm('Are you sure you want to force reset the password for {{ $user->email }}? A temporary password will be generated and emailed.');">
                    @csrf
                    <button type="submit" class="btn btn-outline btn-sm" style="padding: 0.3rem 0.6rem; font-size: 0.8rem; color: #d97706;" title="Force Password Reset">
                      <i class="fas fa-key"></i>
                    </button>
                  </form>
                @endif
              </div>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" style="padding: 3rem; text-align: center; color: var(--text-light);">
              <i class="fas fa-user-slash" style="font-size: 2.5rem; margin-bottom: 0.75rem; display: block; opacity: 0.5;"></i>
              No user accounts found matching your selected search or filter criteria.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  @if($users->hasPages())
    <div style="margin-top: 1.5rem; display: flex; justify-content: center;">
      {{ $users->links() }}
    </div>
  @endif

</div>
@endsection