<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Admin / User Management') }}
        </h2>
    </x-slot>

    <style>
        .admin-table-container {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            overflow: hidden;
        }
        .admin-table { width: 100%; border-collapse: collapse; text-align: left; }
        .admin-table th {
            background: var(--ivory);
            padding: 1rem 1.5rem;
            font-size: 0.65rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            border-bottom: 1px solid rgba(26,24,20,0.06);
        }
        .admin-table td {
            padding: 1.25rem 1.5rem;
            font-size: 0.9rem;
            color: var(--ink);
            border-bottom: 1px solid rgba(26,24,20,0.04);
            vertical-align: middle;
        }
        .role-badge {
            font-size: 0.65rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: 600;
            padding: 0.25rem 0.6rem;
            border-radius: 2px;
        }
        .badge-admin { background: rgba(200, 136, 58, 0.1); color: var(--amber); }
        .badge-user { background: rgba(26, 24, 20, 0.05); color: var(--warm-gray); }
        .badge-manager { background: rgba(74, 124, 89, 0.1); color: var(--success); }

        .action-link {
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: 600;
            text-decoration: none;
            margin-right: 1.5rem;
            transition: color 0.2s;
        }
        .edit-link { color: var(--sage); }
        .edit-link:hover { color: var(--charcoal); }
        .delete-btn {
            color: var(--terracotta);
            background: none;
            border: none;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
        }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            @if(session('success'))
                <div style="background: var(--success); color: #fff; padding: 1rem 1.5rem; border-radius: 2px; margin-bottom: 3rem; font-size: 0.9rem;">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div style="background: var(--terracotta); color: #fff; padding: 1rem 1.5rem; border-radius: 2px; margin-bottom: 3rem; font-size: 0.9rem;">
                    {{ session('error') }}
                </div>
            @endif

            <div class="admin-table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Admin Access</th>
                            <th style="text-align: right;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td>
                                    <div style="font-weight: 600; color: var(--charcoal);">{{ $user->name }}</div>
                                    <div style="font-size: 0.75rem; color: var(--mist);">Joined: {{ $user->created_at->format('M Y') }}</div>
                                </td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <span class="role-badge {{ $user->role === 'user' ? 'badge-user' : 'badge-admin' }}">
                                        {{ str_replace('_', ' ', $user->role) }}
                                    </span>
                                </td>
                                <td>
                                    @if($user->is_admin)
                                        <span style="color: var(--success); font-weight: 600; font-size: 0.8rem;">Enabled</span>
                                    @else
                                        <span style="color: var(--mist); font-size: 0.8rem;">Disabled</span>
                                    @endif
                                </td>
                                <td style="text-align: right;">
                                    @if(auth()->id() !== $user->id)
                                        <div style="display: flex; justify-content: flex-end; align-items: center;">
                                            <a href="{{ route('admin.users.edit', $user) }}" class="action-link edit-link">Edit Role</a>
                                            <form action="{{ route('admin.users.destroy', $user) }}" method="POST" onsubmit="return confirm('Delete this user permanently?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="delete-btn">Delete</button>
                                            </form>
                                        </div>
                                    @else
                                        <span style="font-size: 0.7rem; color: var(--mist); text-transform: uppercase; letter-spacing: 0.05em;">Current User</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div style="margin-top: 2rem;">
                {{ $users->links() }}
            </div>

        </div>
    </div>
</x-app-layout>
