<?php

use App\Livewire\Actions\Logout;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('layouts.guest')] class extends Component
{
    /**
     * Send an email verification notification to the user.
     */
    public function sendVerification(): void
    {
        if (Auth::user()->hasVerifiedEmail()) {
            $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);

            return;
        }

        Auth::user()->sendEmailVerificationNotification();

        Session::flash('status', 'verification-link-sent');
    }

    /**
     * Log the current user out of the application.
     */
    public function logout(Logout $logout): void
    {
        $logout();

        $this->redirect('/', navigate: true);
    }
}; ?>

<div>
    <x-auth.page-heading
        :title="__('Verify your email')"
        :subtitle="__('We sent a link to :email. Open it to activate your account—you can resend if it didn\'t arrive.', ['email' => Auth::user()->email])"
    />

    @if (session('status') == 'verification-link-sent')
        <div
            class="mb-6 rounded-xl border border-success/25 bg-success/10 px-4 py-3 text-sm font-medium text-success"
            role="status"
        >
            {{ __('A new verification link has been sent to the email address you provided during registration.') }}
        </div>
    @endif

    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
        <x-primary-button type="button" class="w-full justify-center py-3 sm:w-auto sm:min-w-[12rem]" wire:click="sendVerification" wire:loading.attr="disabled" wire:target="sendVerification">
            <span wire:loading.remove wire:target="sendVerification">{{ __('Resend email') }}</span>
            <span wire:loading wire:target="sendVerification">{{ __('Sending…') }}</span>
        </x-primary-button>

        <button
            wire:click="logout"
            type="button"
            class="w-full rounded-xl border border-border bg-transparent px-4 py-3 text-center text-sm font-semibold text-muted-foreground transition-colors hover:bg-secondary/50 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:w-auto"
        >
            {{ __('Log out') }}
        </button>
    </div>
</div>
