@php
    $invitation = $this->invitation;
    $user = $this->currentUser;
@endphp

{{-- Single root element for Livewire. The auth layout wrapping is
     applied by #[Layout('layouts.auth')] on the Show component
     class, NOT by an in-view component wrapper. --}}
<div class="flex flex-col gap-6">
    @if ($invitation === null)
            {{-- Unknown token --}}
            <x-auth-header
                :title="__('Invitation not found')"
                :description="__('This invitation link is not valid. Please check the URL or ask the person who invited you to send a new one.')"
            />
        @elseif ($invitation->isAccepted())
            <x-auth-header
                :title="__('Already accepted')"
                :description="__('This invitation has already been accepted. Log in to access the workspace.')"
            />
            <flux:button :href="route('login')" variant="primary" class="w-full">
                {{ __('Log in') }}
            </flux:button>
        @elseif ($invitation->isExpired())
            <x-auth-header
                :title="__('Invitation expired')"
                :description="__('This invitation has expired. Please ask the person who invited you to send a new one.')"
            />
        @elseif ($user !== null && strcasecmp($user->email, $invitation->email) !== 0)
            {{-- Wrong logged-in account --}}
            <x-auth-header
                :title="__('Wrong account')"
                :description="__('You\'re currently logged in as :current but this invitation is for :invited. Log out and log back in as the invited address.', ['current' => $user->email, 'invited' => $invitation->email])"
            />
            <form method="POST" action="{{ route('logout') }}" class="w-full">
                @csrf
                <flux:button type="submit" variant="primary" class="w-full">
                    {{ __('Log out') }}
                </flux:button>
            </form>
        @elseif ($user !== null)
            {{-- Authenticated and matches: show accept button. --}}
            <x-auth-header
                :title="__('Join :name', ['name' => $invitation->account->name])"
                :description="__('You\'ve been invited to join :name as a :role.', ['name' => $invitation->account->name, 'role' => $invitation->role])"
            />

            @error('invitation')
                <flux:callout variant="danger" :heading="$message" />
            @enderror

            <form wire:submit="accept" class="flex flex-col gap-4" data-test="accept-form">
                <flux:button type="submit" variant="primary" class="w-full" data-test="accept-submit">
                    {{ __('Accept invitation') }}
                </flux:button>
            </form>
        @elseif ($this->emailHasExistingUser)
            {{-- Guest, but email already has a user → log in flow. --}}
            <x-auth-header
                :title="__('Log in to accept')"
                :description="__('An account already exists for :email. Log in to accept this invitation.', ['email' => $invitation->email])"
            />
            <flux:button :href="route('login')" variant="primary" class="w-full" data-test="goto-login">
                {{ __('Log in') }}
            </flux:button>
        @else
            {{-- Guest, brand-new user → register form. Email is locked
                 to the invitation email server-side. --}}
            <x-auth-header
                :title="__('Join :name', ['name' => $invitation->account->name])"
                :description="__('Create an account with :email to join as a :role.', ['email' => $invitation->email, 'role' => $invitation->role])"
            />

            @error('invitation')
                <flux:callout variant="danger" :heading="$message" />
            @enderror

            <form wire:submit="registerAndAccept" class="flex flex-col gap-6" data-test="register-form">
                <flux:input
                    wire:model="name"
                    :label="__('Name')"
                    type="text"
                    required
                    autofocus
                    autocomplete="name"
                    :placeholder="__('Full name')"
                    data-test="register-name"
                />

                {{-- Email shown for context only — the actual address
                     used at create time comes from the server-trusted
                     invitation row. The input is disabled so it
                     cannot even be inspected/modified casually. --}}
                <flux:input
                    :label="__('Email')"
                    :value="$invitation->email"
                    type="email"
                    disabled
                    data-test="register-email"
                />

                <flux:input
                    wire:model="password"
                    :label="__('Password')"
                    type="password"
                    required
                    autocomplete="new-password"
                    :placeholder="__('Password')"
                    viewable
                    data-test="register-password"
                />

                <flux:input
                    wire:model="password_confirmation"
                    :label="__('Confirm password')"
                    type="password"
                    required
                    autocomplete="new-password"
                    :placeholder="__('Confirm password')"
                    viewable
                    data-test="register-password-confirm"
                />

                <flux:button type="submit" variant="primary" class="w-full" data-test="register-submit">
                    {{ __('Create account and join') }}
                </flux:button>
        </form>
    @endif
</div>