@extends('admin.layouts.app')
@section('title','Users & Roles')
@section('page-title','Users, Roles & Privileges')
@section('page-subtitle','Assign roles with active periods, conference scope, and page access overrides')
@section('users-active','active')

@push('styles')
<style>
.permission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.permission-box{border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:12px;background:#fafcfa}
.permission-box strong{display:block;font-size:13px;margin-bottom:8px}
.permission-box .perm-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px}
.permission-box .perm-row.inherited{color:#6b7280}
.permission-box .perm-row.inherited input{opacity:.65}
.role-status-scheduled{background:#fff3cd;color:#856404}
.role-status-expired{background:#f8d7da;color:#842029}
</style>
@endpush

@section('content')

@include('admin.partials.users-roles-nav')

@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
@if($errors->any())<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif

<form method="GET" class="mb-4">
    <div class="row g-2 align-items-end">
        <div class="col-md-6">
            <label class="form-label small">Search users</label>
            <input name="search" class="form-control" value="{{ $search }}" placeholder="Name, email, or membership number">
        </div>
        @if($selectedUserId)
            <input type="hidden" name="user_id" value="{{ $selectedUserId }}">
        @endif
        @if($permissionConferenceId ?? null)
            <input type="hidden" name="permission_conference_id" value="{{ $permissionConferenceId }}">
        @endif
        <div class="col-md-2">
            <button type="submit" class="btn btn-green w-100">Search</button>
        </div>
        @if($search || $selectedUserId)
        <div class="col-md-2">
            <a href="{{ route('admin.users-roles.index') }}" class="btn btn-light w-100">Clear</a>
        </div>
        @endif
    </div>
</form>

<div class="row g-4">
    <div class="col-lg-5">
        <div class="cardx p-4">
            <h6 class="mb-3">Users</h6>
            <div class="table-responsive">
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                            <tr class="{{ ($selectedUserId ?? null) === $user->id ? 'table-success' : '' }}">
                                <td>
                                    <strong>{{ $user->name }}</strong>
                                    @if($user->membership_number)
                                        <small class="text-muted d-block">{{ $user->membership_number }}</small>
                                    @endif
                                </td>
                                <td><small>{{ $user->email }}</small></td>
                                <td class="text-end">
                                    <a href="{{ route('admin.users-roles.index', array_filter(['user_id' => $user->id, 'search' => $search, 'permission_conference_id' => $permissionConferenceId ?? null])) }}" class="btn btn-sm {{ ($selectedUserId ?? null) === $user->id ? 'btn-success' : 'btn-outline-green' }}">
                                        Manage
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-muted">No users found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            {{ $users->links() }}
        </div>
    </div>

    <div class="col-lg-7">
        @if($selectedUser)
        <div class="cardx p-4 mb-4">
            <h6 class="mb-1">{{ $selectedUser->name }}</h6>
            <p class="text-muted small mb-3">{{ $selectedUser->email }} · {{ ucfirst($selectedUser->status) }}</p>

            <h6 class="mb-2">Current Roles</h6>
            @if($selectedUser->userRoles->isEmpty())
                <p class="text-muted small">No roles assigned yet.</p>
            @else
                <div class="d-flex flex-wrap gap-2 mb-3">
                    @foreach($selectedUser->userRoles as $ur)
                        @php $status = $ur->activePeriodStatus(); @endphp
                        <div class="border rounded px-2 py-1 d-flex align-items-center gap-2">
                            <span class="badge badge-soft">
                                {{ $ur->role?->display_name }}
                                @if($ur->conference)
                                    ({{ $ur->conference->short_name ?? $ur->conference->name }} {{ $ur->conference->conference_year }})
                                @else
                                    (Global)
                                @endif
                            </span>
                            <span class="badge {{ $status === 'active' ? 'bg-success' : ($status === 'scheduled' ? 'role-status-scheduled' : 'role-status-expired') }}">
                                {{ ucfirst($status) }}
                            </span>
                            @if($ur->active_from || $ur->expires_at)
                                <small class="text-muted">
                                    {{ $ur->active_from?->format('M d, Y H:i') ?? 'Now' }}
                                    –
                                    {{ $ur->expires_at?->format('M d, Y H:i') ?? 'No expiry' }}
                                </small>
                            @endif
                            <form method="POST" action="{{ route('admin.users-roles.destroy', $ur) }}" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <input type="hidden" name="search" value="{{ $search }}">
                                <button type="submit" class="btn btn-sm btn-link text-danger p-0" onclick="return confirm('Remove this role?')">Remove</button>
                            </form>
                        </div>
                    @endforeach
                </div>
            @endif

            <h6 class="mb-2">Assign Role</h6>
            <form method="POST" action="{{ route('admin.users-roles.store') }}" id="assign-role-form">
                @csrf
                <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">
                <input type="hidden" name="search" value="{{ $search }}">
                <div class="row g-2 mb-2">
                    <div class="col-md-6">
                        <label class="form-label small">Role</label>
                        <select name="role_id" id="role_id" class="form-select form-select-sm" required>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" data-global-only="{{ $role->isGlobalOnly() ? '1' : '0' }}">
                                    {{ $role->display_name }}{{ $role->isGlobalOnly() ? ' (Global only)' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6" id="conference-field-wrap">
                        <label class="form-label small">Conference <span id="conference-required-mark" class="text-danger">*</span></label>
                        <select name="conference_id" id="conference_id" class="form-select form-select-sm">
                            <option value="">Select conference</option>
                            @foreach($conferences as $conf)
                                <option value="{{ $conf->id }}">{{ $conf->name }} ({{ $conf->conference_year }})</option>
                            @endforeach
                        </select>
                        <div class="form-text" id="conference-help">Conference-specific roles apply only to that conference.</div>
                    </div>
                </div>
                <div class="row g-2 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label small">Active from</label>
                        <input type="datetime-local" name="active_from" class="form-control form-control-sm" value="{{ old('active_from') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Expires at</label>
                        <input type="datetime-local" name="expires_at" class="form-control form-control-sm" value="{{ old('expires_at') }}">
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-green btn-sm w-100">Assign Role</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="cardx p-4 mb-4">
            <h6 class="mb-2">Page Access Overrides</h6>
            <p class="text-muted small mb-3">
                Check the admin pages and actions this user may access. Overrides apply on top of role permissions.
                Unchecked items rely on the user&apos;s assigned roles only.
            </p>

            <form method="GET" class="mb-3">
                <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">
                <input type="hidden" name="search" value="{{ $search }}">
                <div class="row g-2 align-items-end">
                    <div class="col-md-8">
                        <label class="form-label small">Edit permissions for</label>
                        <select name="permission_conference_id" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Global (all conferences / admin-wide)</option>
                            @foreach($conferences as $conf)
                                <option value="{{ $conf->id }}" @selected(($permissionConferenceId ?? null) == $conf->id)>
                                    {{ $conf->name }} ({{ $conf->conference_year }}) only
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>

            <form method="POST" action="{{ route('admin.users-roles.permissions.sync') }}">
                @csrf
                <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">
                <input type="hidden" name="search" value="{{ $search }}">
                <input type="hidden" name="conference_id" value="{{ $permissionConferenceId }}">

                <div class="row g-2 mb-3">
                    <div class="col-md-4">
                        <label class="form-label small">Override active from</label>
                        <input type="datetime-local" name="active_from" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Override expires at</label>
                        <input type="datetime-local" name="expires_at" class="form-control form-control-sm">
                    </div>
                </div>

                <div class="mb-3">
                    @include('admin.partials.permission-matrix', [
                        'scopes' => $scopes,
                        'checkedIds' => $allowedOverrideIds ?? [],
                        'inheritedIds' => $rolePermissionIds ?? [],
                        'name' => 'permissions',
                        'showInherited' => true,
                    ])
                </div>

                <button type="submit" class="btn btn-green">Save Page Access</button>
            </form>
        </div>

        @if($selectedUser->scopePermissions->isNotEmpty())
        <div class="cardx p-4">
            <h6 class="mb-2">All Permission Overrides</h6>
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Scope</th>
                            <th>Permission</th>
                            <th>Conference</th>
                            <th>Period</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($selectedUser->scopePermissions as $override)
                            @php $status = $override->activePeriodStatus(); @endphp
                            <tr>
                                <td>{{ $override->scopePermission?->scope?->display_name }}</td>
                                <td>{{ ucfirst($override->scopePermission?->permission ?? '') }}</td>
                                <td>{{ $override->conference?->conference_year ?? 'Global' }}</td>
                                <td class="small text-muted">
                                    {{ $override->active_from?->format('M d, Y H:i') ?? 'Now' }}
                                    –
                                    {{ $override->expires_at?->format('M d, Y H:i') ?? 'No expiry' }}
                                </td>
                                <td>
                                    <span class="badge {{ $status === 'active' ? 'bg-success' : ($status === 'scheduled' ? 'role-status-scheduled' : 'role-status-expired') }}">
                                        {{ ucfirst($status) }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <form method="POST" action="{{ route('admin.users-roles.permissions.destroy', $override) }}" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <input type="hidden" name="search" value="{{ $search }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Remove this override?')">Remove</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        @else
        <div class="cardx p-4">
            <h6>Select a user to manage</h6>
            <p class="text-muted mb-4">Search for a user on the left, then click <strong>Manage</strong> to assign roles or set page access.</p>

            <h6 class="mb-2">Quick assign role</h6>
            <form method="POST" action="{{ route('admin.users-roles.store') }}" id="quick-assign-role-form">
                @csrf
                <input type="hidden" name="search" value="{{ $search }}">
                <div class="row g-2 align-items-end mb-2">
                    <div class="col-md-4">
                        <label class="form-label small">User</label>
                        <select name="user_id" class="form-select" required>
                            <option value="">Select user</option>
                            @foreach($userOptions as $user)
                                <option value="{{ $user->id }}">{{ $user->name }} — {{ $user->email }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Role</label>
                        <select name="role_id" class="form-select quick-role-select" required>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" data-global-only="{{ $role->isGlobalOnly() ? '1' : '0' }}">
                                    {{ $role->display_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 quick-conference-wrap">
                        <label class="form-label small">Conference</label>
                        <select name="conference_id" class="form-select quick-conference-select">
                            <option value="">Select conference</option>
                            @foreach($conferences as $conf)
                                <option value="{{ $conf->id }}">{{ $conf->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label small">Active from</label>
                        <input type="datetime-local" name="active_from" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Expires at</label>
                        <input type="datetime-local" name="expires_at" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-green w-100">Assign</button>
                    </div>
                </div>
            </form>
        </div>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script>
(function () {
    function bindRoleConferenceToggle(roleSelect, conferenceSelect, requiredMark, helpText) {
        if (!roleSelect || !conferenceSelect) return;

        function sync() {
            const option = roleSelect.options[roleSelect.selectedIndex];
            const globalOnly = option && option.dataset.globalOnly === '1';
            conferenceSelect.disabled = globalOnly;
            if (globalOnly) {
                conferenceSelect.value = '';
                if (helpText) helpText.textContent = 'This role is always global across all conferences.';
                if (requiredMark) requiredMark.style.display = 'none';
            } else {
                if (helpText) helpText.textContent = 'Conference-specific roles apply only to that conference.';
                if (requiredMark) requiredMark.style.display = '';
            }
        }

        roleSelect.addEventListener('change', sync);
        sync();
    }

    bindRoleConferenceToggle(
        document.getElementById('role_id'),
        document.getElementById('conference_id'),
        document.getElementById('conference-required-mark'),
        document.getElementById('conference-help')
    );

    const quickRole = document.querySelector('.quick-role-select');
    const quickConference = document.querySelector('.quick-conference-select');
    bindRoleConferenceToggle(quickRole, quickConference, null, null);
})();
</script>
@endpush