<?php

use Livewire\Component;
use Illuminate\Support\Facades\Auth;

new class extends Component
{
    public bool $isOpen = false;

    public string $name = '';
    public string $email = '';

    public function openModal(): void
    {
        $user = Auth::user();

        $this->name = (string) ($user?->name ?? '');
        $this->email = (string) ($user?->email ?? '');

        $this->isOpen = true;
    }

    public function closeModal(): void
    {
        $this->isOpen = false;
    }

    public function save(): void
    {
        $user = Auth::user();

        $this->validate([
            'name' => ['required', 'string', 'min:2', 'max:60'],
        ]);

        $user->forceFill([
            'name' => $this->name,
        ])->save();

        $this->dispatch('toastMagic',
            status: 'success',
            title: 'Profile updated',
            message: 'Your profile has been saved.'
        );

        $this->isOpen = false;
    }
};
?>

<div class="relative">
    <button type="button" wire:click="openModal" class="btn-primary w-full text-base">
        Edit profile
    </button>

    @if($isOpen)
        <div class="fixed inset-0 z-[9999]" role="dialog" aria-modal="true" wire:keydown.escape.window="closeModal">
            <button
                type="button"
                class="absolute inset-0 bg-black/50"
                wire:click="closeModal"
                aria-label="Close modal"
            ></button>

            <div class="absolute inset-0 bg-card">
                <div class="mx-auto flex h-full w-full max-w-[420px] flex-col px-6 pt-6 pb-8">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">Edit profile</h3>
                            <p class="mt-1 text-xs text-muted-foreground">Update your display name.</p>
                        </div>

                        <button
                            type="button"
                            wire:click="closeModal"
                            class="grid h-10 w-10 place-items-center rounded-xl bg-background ring-1 ring-border"
                            aria-label="Close"
                        >
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </button>
                    </div>

                    <div class="mt-6 flex flex-col gap-3">
                        <label class="rounded-2xl bg-background p-4 ring-1 ring-border">
                            <p class="text-xs text-muted-foreground">Name</p>
                            <input
                                type="text"
                                wire:model.defer="name"
                                autocomplete="name"
                                class="mt-2 w-full rounded bg-transparent text-sm outline-none"
                                placeholder="Your name"
                            />
                            @error('name')
                            <p class="mt-2 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </label>

                        <label class="rounded-2xl bg-background p-4 ring-1 ring-border opacity-70">
                            <p class="text-xs text-muted-foreground">Email</p>
                            <input
                                type="email"
                                value="{{ auth()->user()->email }}"
                                disabled
                                class="mt-2 w-full rounded bg-transparent text-sm outline-none"
                            />
                        </label>
                    </div>

                    <div class="mt-auto pt-6 flex flex-col gap-3">
                        <button type="button" wire:click="save" wire:loading.attr="disabled" class="btn-primary w-full text-base">
                            <span wire:loading.remove wire:target="save">Save</span>
                            <span wire:loading wire:target="save">Saving...</span>
                        </button>

                        <button type="button" wire:click="closeModal" class="btn-outline w-full text-base">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
