@extends('admin.layout')

@section('title', 'Edit User')
@section('page_title', 'Edit User')

@section('extra_styles')
<style>
    .ef-grid {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 20px;
        align-items: start;
    }
    @media (max-width: 900px) {
        .ef-grid { grid-template-columns: 1fr; }
    }

    /* ── Form fields ── */
    .ef-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
    .ef-field:last-of-type { margin-bottom: 0; }
    .ef-label {
        font-size: 12px; font-weight: 600; color: var(--text-2);
        text-transform: uppercase; letter-spacing: .04em;
    }
    .ef-input, .ef-select, .ef-textarea {
        width: 100%;
        background: var(--bg-2);
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 8px;
        font-size: 13px;
        outline: none;
        transition: border-color .15s;
        font-family: inherit;
    }
    .ef-input, .ef-select { height: 38px; padding: 0 12px; }
    .ef-select { cursor: pointer; appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
    }
    .ef-textarea { height: 90px; padding: 10px 12px; resize: vertical; }
    .ef-input:focus, .ef-select:focus, .ef-textarea:focus { border-color: var(--brand); }
    .ef-input.is-invalid, .ef-select.is-invalid { border-color: #f87171; }
    .ef-error { font-size: 12px; color: #f87171; margin-top: 2px; }

    .ef-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 500px) { .ef-row { grid-template-columns: 1fr; } }

    /* ── Section divider ── */
    .ef-section {
        margin: 24px 0 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        display: flex; align-items: center; gap: 10px;
    }
    .ef-section-title {
        font-size: 13px; font-weight: 600; color: var(--text-2);
        white-space: nowrap;
    }
    .ef-section-hint { font-size: 12px; color: var(--text-3); }

    /* ── Actions ── */
    .ef-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

    /* ── Sidebar info card ── */
    .ef-user-avatar {
        width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
        border: 3px solid var(--border);
    }
    .ef-stat-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
        font-size: 13px;
    }
    .ef-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
    .ef-stat-label { color: var(--text-2); }
    .ef-stat-val   { font-weight: 600; color: var(--text); }

    /* ── Danger zone ── */
    .ef-danger-zone {
        margin-top: 16px;
        padding: 16px;
        border: 1px solid rgba(248,113,113,.25);
        border-radius: 10px;
        background: rgba(248,113,113,.05);
    }
    .ef-danger-title { font-size: 12px; font-weight: 700; color: #f87171; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; }
</style>
@endsection

@section('content')

{{-- ── Page header ── --}}
<div class="adm-page-header" style="margin-bottom:20px;">
    <div style="display:flex;align-items:center;gap:12px;">
        <a href="{{ route('admin.users') }}" class="adm-btn adm-btn-sm">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h1 class="adm-page-title" style="margin:0;">
            <i class="bi bi-person-gear"></i> Edit User
        </h1>
    </div>
</div>

{{-- ── Alerts ── --}}
@if(session('success'))
<div class="adm-alert adm-alert-success" style="margin-bottom:16px;">
    <i class="bi bi-check-circle-fill"></i>
    <span>{{ session('success') }}</span>
    <button class="adm-alert-close"><i class="bi bi-x"></i></button>
</div>
@endif
@if(session('error'))
<div class="adm-alert adm-alert-error" style="margin-bottom:16px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>{{ session('error') }}</span>
    <button class="adm-alert-close"><i class="bi bi-x"></i></button>
</div>
@endif

<div class="ef-grid">

    {{-- ── Left: edit form ── --}}
    <div class="adm-card">
        <div class="adm-card-header">
            <div class="adm-card-title"><i class="bi bi-pencil-square"></i> Account Details</div>
        </div>
        <div class="adm-card-body">
            <form method="POST" action="{{ route('admin.users.update', $user->id) }}">
                @csrf
                @method('PUT')

                {{-- Name --}}
                <div class="ef-field">
                    <label class="ef-label" for="name">Full Name</label>
                    <input class="ef-input @error('name') is-invalid @enderror"
                           id="name" name="name" type="text"
                           value="{{ old('name', $user->name) }}" required autocomplete="off">
                    @error('name')<div class="ef-error">{{ $message }}</div>@enderror
                </div>

                {{-- Email --}}
                <div class="ef-field">
                    <label class="ef-label" for="email">Email Address</label>
                    <input class="ef-input @error('email') is-invalid @enderror"
                           id="email" name="email" type="email"
                           value="{{ old('email', $user->email) }}" required autocomplete="off">
                    @error('email')<div class="ef-error">{{ $message }}</div>@enderror
                </div>

                {{-- Role --}}
                <div class="ef-field">
                    <label class="ef-label" for="role">Role</label>
                    <select class="ef-select @error('role') is-invalid @enderror" id="role" name="role">
                        <option value="user"        {{ old('role', $user->role) === 'user'        ? 'selected' : '' }}>User</option>
                        <option value="admin"       {{ old('role', $user->role) === 'admin'       ? 'selected' : '' }}>Admin</option>
                        <option value="super_admin" {{ old('role', $user->role) === 'super_admin' ? 'selected' : '' }}>Super Admin</option>
                    </select>
                    @error('role')<div class="ef-error">{{ $message }}</div>@enderror
                </div>

                {{-- Password section --}}
                <div class="ef-section">
                    <span class="ef-section-title"><i class="bi bi-lock-fill" style="color:var(--brand);"></i> Change Password</span>
                    <span class="ef-section-hint">— leave blank to keep current password</span>
                </div>

                <div class="ef-row">
                    <div class="ef-field" style="margin-bottom:0;">
                        <label class="ef-label" for="new_password">New Password</label>
                        <input class="ef-input @error('new_password') is-invalid @enderror"
                               id="new_password" name="new_password" type="password"
                               placeholder="Min. 8 characters" autocomplete="new-password">
                        @error('new_password')<div class="ef-error">{{ $message }}</div>@enderror
                    </div>
                    <div class="ef-field" style="margin-bottom:0;">
                        <label class="ef-label" for="new_password_confirmation">Confirm Password</label>
                        <input class="ef-input"
                               id="new_password_confirmation" name="new_password_confirmation"
                               type="password" placeholder="Repeat password" autocomplete="new-password">
                    </div>
                </div>

                <div class="ef-actions">
                    <button type="submit" class="adm-btn adm-btn-primary">
                        <i class="bi bi-check-circle-fill"></i> Save Changes
                    </button>
                    <a href="{{ route('admin.users') }}" class="adm-btn">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    {{-- ── Right: user info sidebar ── --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        {{-- Profile card --}}
        <div class="adm-card">
            <div class="adm-card-body" style="text-align:center;padding-top:28px;padding-bottom:24px;">
                <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="ef-user-avatar">
                <div style="margin-top:12px;font-size:16px;font-weight:700;color:var(--text);">{{ $user->name }}</div>
                <div style="font-size:12px;color:var(--text-2);margin:4px 0 10px;">{{ $user->email }}</div>
                @if($user->role === 'super_admin')
                    <span class="adm-badge adm-badge-superadmin">Super Admin</span>
                @elseif($user->role === 'admin')
                    <span class="adm-badge adm-badge-admin">Admin</span>
                @else
                    <span class="adm-badge adm-badge-user">User</span>
                @endif
            </div>
        </div>

        {{-- Stats card --}}
        <div class="adm-card">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="bi bi-info-circle"></i> Account Info</div>
            </div>
            <div class="adm-card-body">
                <div class="ef-stat-row">
                    <span class="ef-stat-label">User ID</span>
                    <span class="ef-stat-val">#{{ $user->id }}</span>
                </div>
                <div class="ef-stat-row">
                    <span class="ef-stat-label">Joined</span>
                    <span class="ef-stat-val">{{ $user->created_at->format('M d, Y') }}</span>
                </div>
                <div class="ef-stat-row">
                    <span class="ef-stat-label">Last active</span>
                    <span class="ef-stat-val">{{ $user->updated_at->diffForHumans() }}</span>
                </div>
                <div class="ef-stat-row">
                    <span class="ef-stat-label">Videos</span>
                    <span class="ef-stat-val" style="color:#818cf8;">{{ $user->videos->count() }}</span>
                </div>
                <div class="ef-stat-row">
                    <span class="ef-stat-label">Email verified</span>
                    @if($user->email_verified_at)
                        <span class="adm-badge adm-badge-verified" style="font-size:11px;">Verified</span>
                    @else
                        <span class="adm-badge adm-badge-unverified" style="font-size:11px;">Unverified</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Impersonate --}}
        @if(!$user->isSuperAdmin())
        <form method="POST" action="{{ route('admin.users.impersonate', $user->id) }}">
            @csrf
            <button type="submit" class="adm-btn adm-btn-impersonate" style="width:100%;">
                <i class="bi bi-person-badge"></i> Impersonate User
            </button>
        </form>
        @endif

        {{-- Danger zone --}}
        @if(!$user->isSuperAdmin())
        <div class="ef-danger-zone">
            <div class="ef-danger-title"><i class="bi bi-exclamation-triangle-fill me-1"></i> Danger Zone</div>
            <button type="button" class="adm-btn adm-btn-danger" style="width:100%;"
                    onclick="openDelDialog()">
                <i class="bi bi-trash3-fill"></i> Delete This User
            </button>
        </div>
        @endif

    </div>
</div>

{{-- ── Delete confirmation dialog ── --}}
@if(!$user->isSuperAdmin())
<div class="adm-dialog-overlay" id="delDialog">
    <div class="adm-dialog">
        <div class="adm-dialog-header">
            <div class="adm-dialog-title">
                <i class="bi bi-exclamation-triangle-fill"></i> Delete User
            </div>
            <button type="button" class="adm-btn adm-btn-sm" onclick="closeDelDialog()"
                    style="border:none;background:none;color:var(--text-2);">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <div class="adm-dialog-body">
            <p>You are about to permanently delete <strong>{{ $user->name }}</strong>.</p>
            <div class="adm-dialog-warning">
                <i class="bi bi-info-circle-fill" style="flex-shrink:0;margin-top:1px;"></i>
                All videos uploaded by this user will also be deleted. This cannot be undone.
            </div>
        </div>
        <div class="adm-dialog-footer">
            <button type="button" class="adm-btn" onclick="closeDelDialog()">Cancel</button>
            <form method="POST" action="{{ route('admin.users.delete', $user->id) }}">
                @csrf @method('DELETE')
                <button type="submit" class="adm-btn adm-btn-danger" style="height:36px;">
                    <i class="bi bi-trash3-fill"></i> Delete Permanently
                </button>
            </form>
        </div>
    </div>
</div>
@endif

@endsection

@section('scripts')
<script>
function openDelDialog()  { document.getElementById('delDialog').classList.add('open'); }
function closeDelDialog() { document.getElementById('delDialog').classList.remove('open'); }
document.getElementById('delDialog')?.addEventListener('click', e => { if (e.target === document.getElementById('delDialog')) closeDelDialog(); });
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeDelDialog(); });
</script>
@endsection