@extends('layouts.app')
@section('title', 'Usuários')
@section('page_title', 'Gestão de Usuários')

@section('content')
<div class="py-6 space-y-4">

    {{-- Barra de filtros --}}
    <div class="flex items-center justify-between">
        <form class="flex gap-2" method="GET"
              x-data
              x-on:change="$el.submit()">
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Buscar por nome ou e-mail..."
                   class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 w-72"
                   x-on:keydown.enter="$el.closest('form').submit()">
            <select name="role" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                <option value="">Todos os papéis</option>
                @foreach($roles as $role)
                    <option value="{{ $role->name }}" {{ request('role') === $role->name ? 'selected' : '' }}>{{ \App\Models\User::ROLE_LABELS[$role->name] ?? ucfirst($role->name) }}</option>
                @endforeach
            </select>
            @if(request('search') || request('role'))
                <a href="{{ route('admin.usuarios.index') }}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm hover:bg-gray-300 transition">Limpar</a>
            @endif
        </form>
        <a href="{{ route('admin.usuarios.create') }}"
           class="text-white px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2"
           style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Novo Usuário
        </a>
    </div>

    {{-- Tabela --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <x-th-sort column="name"         label="Nome"    :sort="$sort" :dir="$dir" />
                    <x-th-sort column="email"        label="E-mail"  :sort="$sort" :dir="$dir" />
                    <x-th-sort column="role_label"   label="Papel"   :sort="$sort" :dir="$dir" />
                    <x-th-sort column="cliente_nome" label="Cliente" :sort="$sort" :dir="$dir" />
                    <x-th-sort column="is_active"    label="Status"  :sort="$sort" :dir="$dir" />
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($usuarios as $usuario)
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $usuario->name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-500">{{ $usuario->email }}</td>
                    <td class="px-6 py-4">
                        @php $role = $usuario->roles->first()?->name ?? $usuario->role_label ?? '—'; @endphp
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {{ $role === 'superadmin' ? 'bg-red-100 text-red-800' : ($role === 'operador' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800') }}">
                            {{ \App\Models\User::ROLE_LABELS[$role] ?? ucfirst($role) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500">{{ $usuario->cliente?->nome_fantasia ?? $usuario->cliente?->razao_social ?? '—' }}</td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {{ $usuario->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $usuario->is_active ? 'Ativo' : 'Suspenso' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        @php $podeGerenciarUsuario = !(auth()->user()?->hasRole('supervisor') && $role === 'superadmin'); @endphp
                        @if($podeGerenciarUsuario)
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('admin.usuarios.edit', $usuario) }}"
                               class="inline-flex items-center px-3 py-1 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-xs font-medium transition">Editar</a>

                            <form method="POST" action="{{ route('admin.usuarios.toggle-ativo', $usuario) }}">
                                @csrf @method('PATCH')
                                @if($usuario->is_active)
                                    <button type="submit"
                                            class="inline-flex items-center px-3 py-1 rounded-md bg-yellow-500 text-white hover:bg-yellow-600 text-xs font-medium transition">Suspender</button>
                                @else
                                    <button type="submit"
                                            class="inline-flex items-center px-3 py-1 rounded-md bg-green-600 text-white hover:bg-green-700 text-xs font-medium transition">Ativar</button>
                                @endif
                            </form>

                            @if($usuario->id !== auth()->id())
                            <form method="POST" action="{{ route('admin.usuarios.destroy', $usuario) }}"
                                  onsubmit="return confirm('Excluir este usuário?')">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="inline-flex items-center px-3 py-1 rounded-md bg-red-600 text-white hover:bg-red-700 text-xs font-medium transition">Excluir</button>
                            </form>
                            @endif
                        </div>
                        @else
                            <span class="text-xs text-gray-400">Protegido</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-gray-400 text-sm">Nenhum usuário encontrado.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Paginação --}}
    <div>{{ $usuarios->links() }}</div>
</div>
@endsection