<?php

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

new class extends Component
{
    public string $password = '';

    /**
     * Delete the currently authenticated user.
     */
    public function deleteUser(Logout $logout): void
    {
        $this->validate([
            'password' => ['required', 'string', 'current_password'],
        ]);

        tap(Auth::user(), $logout(...))->delete();

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

<section class="space-y-5">
    <header class="space-y-1">
        <h2 class="text-base font-semibold text-destructive">
            {{ __('Delete account') }}
        </h2>

        <p class="text-sm text-muted-foreground leading-relaxed">
            {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }}
        </p>
    </header>

    <x-danger-button
        class="min-h-11 w-full justify-center sm:w-auto"
        x-data=""
        x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
    >{{ __('Delete account') }}</x-danger-button>

    <x-modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable>
        <form wire:submit="deleteUser" class="p-6 sm:p-8">

            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-destructive/15 text-destructive">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
            </div>

            <h2 class="mt-4 text-lg font-semibold text-foreground">
                {{ __('Delete your account?') }}
            </h2>

            <p class="mt-2 text-sm text-muted-foreground leading-relaxed">
                {{ __('This cannot be undone. Enter your password to confirm permanent deletion.') }}
            </p>

            <div class="mt-6">
                <x-input-label for="password" value="{{ __('Password') }}" />

                <x-text-input
                    wire:model="password"
                    id="password"
                    name="password"
                    type="password"
                    class="mt-1.5 block w-full min-h-11 max-w-md"
                    placeholder="{{ __('Current password') }}"
                />

                <x-input-error :messages="$errors->get('password')" class="mt-2" />
            </div>

            <div class="mt-8 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-3">
                <x-secondary-button type="button" class="min-h-11 w-full justify-center sm:w-auto" x-on:click="$dispatch('close')">
                    {{ __('Cancel') }}
                </x-secondary-button>

                <x-danger-button class="min-h-11 w-full justify-center sm:w-auto">
                    {{ __('Delete permanently') }}
                </x-danger-button>
            </div>
        </form>
    </x-modal>
</section>
