@php
    $usuario = $usuario ?? null;
    $editando = $usuario !== null;

    $tipoSelecionado = old(
        'tipo',
        $usuario?->tipo?->value
    );

    $statusSelecionado = old(
        'status',
        $usuario?->status?->value
            ?? \App\Enums\StatusUsuario::ATIVO->value
    );
@endphp

@if ($errors->any())
    <div class="ui-alert ui-alert-error">
        <div
            class="
                flex h-9 w-9 flex-shrink-0
                items-center justify-center
                rounded-lg bg-red-100 text-red-600
            "
        >
            <svg
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.8"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                />
            </svg>
        </div>

        <div class="min-w-0">
            <h3 class="font-semibold">
                Verifique os dados informados
            </h3>

            <ul class="mt-2 list-inside list-disc space-y-1">
                @foreach ($errors->all() as $erro)
                    <li>{{ $erro }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<div class="space-y-6">

    {{-- Dados de acesso --}}
    <x-ui.card
        title="Dados de acesso"
        description="Informações utilizadas pelo usuário para entrar no sistema."
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <x-ui.input
                name="name"
                label="Nome completo"
                :value="$usuario?->name"
                required
                autofocus
                autocomplete="name"
                placeholder="Nome do usuário"
            />

            <x-ui.input
                name="email"
                label="E-mail"
                type="email"
                :value="$usuario?->email"
                required
                autocomplete="email"
                placeholder="usuario@exemplo.com"
            />
        </div>
    </x-ui.card>

    {{-- Perfil e acesso --}}
    <x-ui.card
        title="Perfil e acesso"
        description="Defina quais áreas o usuário poderá acessar e a situação da conta."
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <x-ui.select
                name="tipo"
                label="Tipo de usuário"
                required
                help="O tipo determina as permissões disponíveis para o usuário."
            >
                <option value="">
                    Selecione o tipo
                </option>

                @foreach ($tipos as $tipo)
                    <option
                        value="{{ $tipo->value }}"
                        @selected(
                            $tipoSelecionado === $tipo->value
                        )
                    >
                        {{ $tipo->label() }}
                    </option>
                @endforeach
            </x-ui.select>

            <x-ui.select
                name="status"
                label="Status de acesso"
                required
                help="Usuários inativos não poderão acessar o sistema."
            >
                @foreach ($statusDisponiveis as $status)
                    <option
                        value="{{ $status->value }}"
                        @selected(
                            $statusSelecionado === $status->value
                        )
                    >
                        {{ $status->label() }}
                    </option>
                @endforeach
            </x-ui.select>
        </div>

        @if ($editando && auth()->id() === $usuario->id)
            <div class="ui-alert ui-alert-warning mt-6">
                <svg
                    class="mt-0.5 h-5 w-5 flex-shrink-0"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.8"
                        d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                    />
                </svg>

                <div>
                    <div class="font-semibold">
                        Você está editando sua própria conta
                    </div>

                    <p class="mt-1 leading-6">
                        Por segurança, não será permitido remover seu perfil
                        de administrador nem alterar seu status para pendente
                        ou inativo.
                    </p>
                </div>
            </div>
        @endif
    </x-ui.card>

    {{-- Senha --}}
    <x-ui.card
        :title="$editando ? 'Alterar senha' : 'Senha inicial'"
        :description="
            $editando
                ? 'Preencha os campos apenas quando desejar alterar a senha atual.'
                : 'Defina uma senha segura para o primeiro acesso do usuário.'
        "
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <x-ui.input
                name="password"
                label="Senha"
                type="password"
                :required="!$editando"
                autocomplete="new-password"
                :help="
                    $editando
                        ? 'Deixe vazio para manter a senha atual.'
                        : 'Utilize uma combinação segura de letras, números e símbolos.'
                "
            />

            <x-ui.input
                name="password_confirmation"
                label="Confirmar senha"
                type="password"
                :required="!$editando"
                autocomplete="new-password"
                help="Repita exatamente a senha informada ao lado."
            />
        </div>

        <div
            class="
                mt-6 rounded-xl border border-slate-200
                bg-slate-50 p-4
            "
        >
            <div class="flex items-start gap-3">
                <svg
                    class="
                        mt-0.5 h-5 w-5 flex-shrink-0
                        text-indigo-500
                    "
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="1.8"
                        d="M9 12.75 11.25 15 15 9.75m6 2.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
                    />
                </svg>

                <div>
                    <div class="text-sm font-semibold text-slate-700">
                        Segurança da conta
                    </div>

                    <p class="mt-1 text-sm leading-6 text-slate-500">
                        Depois de acessar o sistema, o usuário poderá ativar a
                        autenticação em dois fatores na página de perfil e
                        segurança.
                    </p>
                </div>
            </div>
        </div>
    </x-ui.card>
</div>