<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">Profile Photo</p>
                <h2 class="text-2xl font-black text-slate-950 dark:text-white">Choose how your profile appears</h2>
            </div>
            <a href="{{ route('profile.edit') }}" class="inline-flex rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                Back to Profile
            </a>
        </div>
    </x-slot>

    <div class="grid gap-6 lg:grid-cols-[24rem_1fr]">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <p class="text-sm font-black uppercase tracking-wide text-slate-500 dark:text-slate-400">Current image</p>
            <div class="mt-6 flex flex-col items-center text-center">
                <x-user-avatar :user="$user" class="h-32 w-32" />
                <h3 class="mt-4 text-xl font-black text-slate-950 dark:text-white">{{ $user->name }}</h3>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                    Active type: <span class="font-bold capitalize text-blue-700 dark:text-blue-300">{{ str_replace('_', ' ', $user->avatar_type ?? 'default') }}</span>
                </p>
            </div>

            <form method="POST" action="{{ route('profile.photo.remove') }}" class="mt-6">
                @csrf
                @method('DELETE')
                <button class="w-full rounded-lg border border-red-200 px-4 py-2 text-sm font-bold text-red-700 transition hover:bg-red-50 dark:border-red-900/60 dark:text-red-300 dark:hover:bg-red-950/40">
                    Remove profile picture
                </button>
            </form>
        </section>

        <div class="space-y-6">
            <section
                x-data="{ preview: null }"
                class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900"
            >
                <h3 class="text-xl font-black text-slate-950 dark:text-white">Upload custom profile picture</h3>
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">Allowed files: JPG, JPEG, PNG, or WebP. Maximum size: 2MB. SVG and executable files are blocked.</p>

                <form method="POST" action="{{ route('profile.photo.upload') }}" enctype="multipart/form-data" class="mt-5 space-y-4">
                    @csrf
                    <div class="grid gap-4 sm:grid-cols-[9rem_1fr] sm:items-center">
                        <div class="flex h-32 w-32 items-center justify-center overflow-hidden rounded-full border border-blue-100 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/40">
                            <template x-if="preview">
                                <img :src="preview" alt="Preview" class="h-full w-full object-cover">
                            </template>
                            <template x-if="! preview">
                                <span class="px-4 text-center text-xs font-bold text-blue-700 dark:text-blue-300">Preview</span>
                            </template>
                        </div>

                        <div>
                            <input
                                type="file"
                                name="profile_photo"
                                accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                                required
                                class="w-full rounded-lg border border-blue-100 bg-white px-3 py-2 text-sm text-slate-700 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-bold file:text-white dark:border-blue-900 dark:bg-slate-950 dark:text-slate-200"
                                @change="preview = $event.target.files[0] ? URL.createObjectURL($event.target.files[0]) : null"
                            >
                            @error('profile_photo')
                                <p class="mt-2 text-sm font-bold text-red-600 dark:text-red-300">{{ $message }}</p>
                            @enderror
                            <button class="mt-4 rounded-lg bg-blue-600 px-5 py-2 text-sm font-black text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700">
                                Save uploaded photo
                            </button>
                        </div>
                    </div>
                </form>
            </section>

            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <h3 class="text-xl font-black text-slate-950 dark:text-white">Select built-in avatar</h3>
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">Choose a ViZuTrade avatar if you do not want to upload a personal photo.</p>

                <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($avatars as $avatar)
                        <form method="POST" action="{{ route('profile.avatar.select') }}" class="rounded-lg border p-4 transition hover:-translate-y-1 hover:shadow-lg {{ $user->usesAvatarPath($avatar->image_path) ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200 dark:border-blue-400 dark:bg-blue-950/40 dark:ring-blue-900' : 'border-blue-100 bg-white dark:border-blue-900/50 dark:bg-slate-950' }}">
                            @csrf
                            <input type="hidden" name="avatar_id" value="{{ $avatar->id }}">
                            <div class="flex items-center gap-4">
                                <img src="{{ $avatar->imageUrl() }}" alt="{{ $avatar->name }}" class="h-16 w-16 rounded-full object-cover ring-2 ring-blue-100 dark:ring-blue-900">
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-black text-slate-950 dark:text-white">{{ $avatar->name }}</p>
                                    @if ($avatar->is_default)
                                        <p class="text-xs font-bold text-blue-700 dark:text-blue-300">Default avatar</p>
                                    @endif
                                </div>
                            </div>
                            <button class="mt-4 w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white hover:bg-blue-700">
                                {{ $user->usesAvatarPath($avatar->image_path) ? 'Selected' : 'Use this avatar' }}
                            </button>
                        </form>
                    @endforeach
                </div>
            </section>
        </div>
    </div>
</x-app-layout>
