@extends('admin.layout')

@section('title', '编辑用户 - ' . $user->name)
@section('page-title', '编辑用户：' . $user->name)

@section('content')
<div class="card" style="max-width: 760px;">
    <div class="card-body">
        <div class="muted" style="margin-bottom: var(--space-4);">
            邮箱：{{ $user->email }}
            @if ($user->id === request()->user()->id)
                <span class="badge badge-role-user">当前账号</span>
            @endif
            <span class="badge badge-role-{{ $user->role }}">{{ $user->roleLabel() }}</span>
        </div>

        @if (! $canManage)
            <div class="alert alert-warning">您的权限不高于该用户，无法修改其角色、权限或密码。</div>
        @endif

        {{-- 角色 / 权限（仅具备分配权限且层级更高者可改） --}}
        @if ($canManage && auth()->user()->canPerm('users.assign_role'))
        <form method="POST" action="{{ route('admin.users.update', $user) }}">
            @csrf
            @method('PUT')

            <div class="form-group">
                <label class="form-label">角色</label>
                <select name="role" id="role-select" class="input">
                    @foreach ($roles as $key => $cfg)
                        <option value="{{ $key }}"
                                {{ $user->role === $key ? 'selected' : '' }}
                                @if ($key === 'super_admin' && ! request()->user()->isSuperAdmin()) disabled @endif>
                            {{ $cfg['label'] }}
                        </option>
                    @endforeach
                </select>
                <p class="role-hint">
                    @if (! request()->user()->isSuperAdmin())
                        超级管理员角色仅限超级管理员分配；您只能分配权限低于自身的角色。
                    @else
                        不同角色拥有不同的后台视图与权限，下方将实时显示该角色的默认权限。
                    @endif
                </p>
            </div>

            {{-- 各角色默认权限（只读，前端按所选角色切换显隐） --}}
            <div id="role-defaults">
                @foreach ($roles as $key => $cfg)
                    <div class="perm-group role-default" data-role="{{ $key }}"
                         style="background: var(--color-surface); {{ $user->role === $key ? '' : 'display:none;' }}">
                        <div class="perm-group-title">{{ $cfg['label'] }} · 默认权限</div>
                        <div class="perm-list">
                            @if (($cfg['permissions'] ?? []) === ['*'])
                                <div class="perm-item"><x-icon name="lock" :size="16"/> 全部权限（超级管理员）</div>
                            @elseif (empty($cfg['permissions'] ?? []))
                                <div class="perm-item muted">无（注册用户 / 待分配）</div>
                            @else
                                @foreach ($cfg['permissions'] as $p)
                                    <div class="perm-item"><x-icon name="check" :size="16"/> {{ $permissions[$p]['label'] ?? $p }}</div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- 内部员工：细粒度勾选 --}}
            <div id="perm-section" class="perm-group" @if ($user->role !== 'staff') style="display:none;" @endif>
                <div class="perm-group-title">内部员工权限分配</div>
                <p class="role-hint">勾选该员工可执行的权限点，未勾选则无对应后台访问权。</p>
                @foreach ($groups as $gKey => $gLabel)
                    <div class="perm-group" style="margin-bottom: var(--space-3);">
                        <div class="perm-group-title">{{ $gLabel }}</div>
                        <div class="perm-list">
                            @foreach ($permissions as $permKey => $permCfg)
                                @if ($permCfg['group'] === $gKey)
                                    <label class="perm-item">
                                        <input type="checkbox" name="permissions[]" value="{{ $permKey }}"
                                               {{ in_array($permKey, $userPerms, true) ? 'checked' : '' }}>
                                        {{ $permCfg['label'] }}
                                    </label>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row-actions" style="margin-top: var(--space-5);">
                <button type="submit" class="btn btn-primary">保存角色与权限</button>
                <a href="{{ route('admin.users.index') }}" class="btn">返回</a>
            </div>
        </form>
        @endif

        {{-- 重置密码（仅具备重置权限且层级更高者可操作） --}}
        @if ($canManage && auth()->user()->canPerm('users.reset_password'))
        <hr style="margin: var(--space-6) 0; border-color: var(--color-border);">
        <div id="reset-password" class="perm-group">
            <div class="perm-group-title">重置密码</div>
            <p class="role-hint">可指定一个新密码，或留空由系统生成 12 位随机密码（生成后请妥善告知用户）。</p>
            <form method="POST" action="{{ route('admin.users.reset-password', $user) }}" class="space-y-4">
                @csrf
                <div class="form-group">
                    <label class="form-label">新密码（可选）</label>
                    <input type="password" name="password" class="input" autocomplete="new-password" placeholder="留空则生成随机密码">
                </div>
                <div class="form-group">
                    <label class="form-label">确认新密码</label>
                    <input type="password" name="password_confirmation" class="input" autocomplete="new-password">
                </div>
                <button type="submit" class="btn btn-primary">重置密码</button>
            </form>
        </div>
        @endif
    </div>
</div>

@if ($canManage && auth()->user()->canPerm('users.assign_role'))
<script>
    (function () {
        var sel = document.getElementById('role-select');
        var defaults = document.querySelectorAll('#role-defaults .role-default');
        var sec = document.getElementById('perm-section');
        function sync() {
            var v = sel.value;
            if (v === 'staff') {
                sec.style.display = '';
                defaults.forEach(function (el) { el.style.display = 'none'; });
            } else {
                sec.style.display = 'none';
                defaults.forEach(function (el) {
                    el.style.display = (el.getAttribute('data-role') === v) ? '' : 'none';
                });
            }
        }
        sel.addEventListener('change', sync);
        sync();
    })();
</script>
@endif
@endsection