@extends('layouts.app')

@section('mobile-title', 'Edit User')
@section('mobile-subtitle', $userRecord->name)
@section('mobile-back', route('users.index'))

@section('content')
    <div class="mx-auto max-w-5xl">
        <div class="mb-6 border-b border-[var(--construct-border)] pb-5">
            <a href="{{ route('users.index') }}" class="inline-flex items-center gap-1 text-sm font-bold text-[var(--construct-muted)] hover:text-[var(--construct-primary-dark)]">
                <span class="material-symbols-outlined text-[16px]">arrow_back</span>
                Back to Team
            </a>
            <div class="mt-4 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                <div>
                    <h1 class="text-3xl font-bold">Edit Team Member</h1>
                    <p class="mt-2 text-sm text-[var(--construct-muted)]">{{ $userRecord->email }}</p>
                </div>
                <span class="w-fit rounded px-3 py-1 text-xs font-bold {{ $userRecord->is_active ? 'bg-emerald-50 text-emerald-800' : 'bg-[var(--construct-surface-container)] text-[var(--construct-muted)]' }}">{{ $userRecord->is_active ? 'Active' : 'Deactivated' }}</span>
            </div>
        </div>

        <form method="POST" action="{{ route('users.update', $userRecord) }}">
            @include('users.form')
        </form>

        @if ($userRecord->exists && $transferUsers->isNotEmpty())
            <section class="mt-6 rounded border border-[var(--construct-border)] bg-white p-5">
                <h2 class="text-xl font-bold">Transfer Document Ownership</h2>
                <p class="mt-2 text-sm text-[var(--construct-muted)]">Moves responsibility for folders and documents to another active user while keeping upload and creation history unchanged.</p>
                <form method="POST" action="{{ route('users.transfer-documents', $userRecord) }}" class="mt-4 grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
                    @csrf
                    <label class="grid gap-2 text-sm">
                        <span class="font-bold">Transfer to</span>
                        <select name="transfer_to_user_id" required class="rounded border border-[var(--construct-border)] bg-white px-3 py-2.5 text-sm">
                            <option value="">Choose active user</option>
                            @foreach ($transferUsers as $transferUser)
                                <option value="{{ $transferUser->id }}">{{ $transferUser->name }} · {{ $transferUser->role }}</option>
                            @endforeach
                        </select>
                    </label>
                    <button class="rounded bg-[var(--construct-primary)] px-4 py-2.5 text-sm font-bold text-white">Transfer</button>
                </form>
            </section>
        @endif

        @can('delete', $userRecord)
            <section class="mt-6 rounded border border-red-200 bg-white p-5">
                <h2 class="text-xl font-bold text-red-900">Delete User</h2>
                <p class="mt-2 text-sm text-[var(--construct-muted)]">Deletes this user only when they have no created projects, reports, document ownership, or upload history.</p>
                <form method="POST" action="{{ route('users.destroy', $userRecord) }}" class="mt-4" onsubmit="return confirm('Delete this user permanently?')">
                    @csrf
                    @method('DELETE')
                    <button class="rounded bg-red-700 px-4 py-2.5 text-sm font-bold text-white hover:bg-red-600">Delete User</button>
                </form>
            </section>
        @endcan
    </div>
@endsection