<?php

use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use App\Models\Setting;
new class extends Component
{
    public bool $notifications = false;
    public bool $public = false;

    public function saveSettings()
    {
        Setting::updateOrCreate(['user_id' => Auth::id(), 'key' => 'notifications'], ['value' => $this->notifications]);

        Setting::updateOrCreate(['user_id' => Auth::id(), 'key' => 'public'], ['value' => $this->public]);

        $this->dispatch('toastMagic',
            status: 'success',
            title: 'Settings saved',
            message: 'The settings have succesfully been saved.'
        );
    }
};
?>

<div class="px-6 pt-16 pb-10">
    <div class="mx-auto max-w-[420px]">
        <div class="text-center">
            <div class="mx-auto flex items-center justify-center gap-2">
                <div class="grid h-12 w-12 place-items-center rounded-xl bg-primary text-primary-foreground shadow-sm">
                    <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                    </svg>
                </div>
                <span class="text-2xl font-bold tracking-tight">PatchBook</span>
            </div>

            <h1 class="mt-6 text-3xl font-bold leading-tight tracking-tight text-balance">
                Account
            </h1>

            <p class="mx-auto mt-2 max-w-[320px] text-sm leading-relaxed text-muted-foreground">
                Your profile and security settings.
            </p>
        </div>

        <div class="mt-8 rounded-2xl bg-card p-5 ring-1 ring-border">
            <div class="flex items-center gap-4">
                <div class="grid h-14 w-14 place-items-center rounded-2xl bg-primary/15 ring-1 ring-border">
                    <span class="text-lg font-bold text-primary">
                        {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                    </span>
                </div>

                <div class="min-w-0 flex-1">
                    <h2 class="truncate text-lg font-semibold leading-tight">
                        {{ auth()->user()->name }}
                    </h2>
                    <p class="truncate text-sm text-muted-foreground">
                        {{ auth()->user()->email }}
                    </p>
                </div>
            </div>

            <div class="mt-5">
                <div class="rounded-2xl bg-background p-4 ring-1 ring-border text-center">
                    <p class="text-xs text-muted-foreground">Member since</p>
                    <p class="mt-1 text-sm font-semibold">
                        {{ optional(auth()->user()->created_at)->format('d M Y') ?? 'Unknown' }}
                    </p>
                </div>
            </div>

            <div class="mt-5 flex flex-col gap-3">
                <livewire:profile.edit />

                @if(Auth::user()->password)
                    <button type="button" class="btn-outline w-full text-base">
                        Change password
                    </button>
                @endif

                <form action="{{ route('logout') }}" method="post">
                    @csrf
                    <button type="submit" class="btn-outline w-full text-base">
                        Logout
                    </button>
                </form>
            </div>
        </div>

        <hr class="mt-6 mb-6 border-t border-muted-foreground opacity-20">

        <div class="rounded-2xl bg-card p-5 ring-1 ring-border">
            <h3 class="text-base font-semibold">Preferences</h3>

            <div class="mt-4 flex flex-col gap-3">
                <label class="flex items-center justify-between rounded-2xl bg-background px-4 py-3 ring-1 ring-border">
                    <div class="flex items-center gap-3">
                        <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15">
                            <svg class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16l-2-2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold leading-tight">Notifications</p>
                            <p class="text-xs text-muted-foreground">Email updates and reminders</p>
                        </div>
                    </div>
                    <input wire:change.debounce="saveSettings()" wire:model="notifications" type="checkbox" class="h-5 w-5 rounded border-muted-foreground/30" />
                </label>

                <label class="flex items-center justify-between rounded-2xl bg-background px-4 py-3 ring-1 ring-border">
                    <div class="flex items-center gap-3">
                        <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15">
                            <svg class="h-5 w-5 text-primary" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M12 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M3 12h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold leading-tight">Public profile</p>
                            <p class="text-xs text-muted-foreground">Let others see your name</p>
                        </div>
                    </div>
                    <input wire:change.debounce="saveSettings()" wire:model="public" type="checkbox" class="h-5 w-5 rounded border-muted-foreground/30" />
                </label>
            </div>
        </div>
    </div>
</div>
