@php
    $generateUrl = $generateUrl ?? url('/ai-studio/generate');
    $csrfToken = csrf_token();
@endphp

<section
    class="w-full max-w-2xl mx-auto px-4 py-10"
    x-data="designYourNailsStudio({ generateUrl: @js($generateUrl), csrfToken: @js($csrfToken) })"
    x-init="init()"
    x-cloak
>
    <style>
        /* Lightweight, self-contained animation for the waiting room ring. */
        @keyframes nails-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
        .nails-pulse { animation: nails-pulse 1.2s ease-in-out infinite; }
    </style>

    <!-- Upload Form -->
    <div x-show="mode === 'upload'" x-transition.opacity.duration.200 class="space-y-6">
        <header class="space-y-2">
            <h2 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">
                {{ __('Design Your Nails') }}
            </h2>
            <p class="text-sm text-zinc-600 dark:text-zinc-300">
                {{ __('Upload a clear photo of your hand and choose your style. We will generate your nail design instantly.') }}
            </p>
        </header>

        @if (isset($errors) && $errors->any())
            <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-200">
                <ul class="list-disc pl-5 rtl:pl-0 rtl:pr-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form
            x-ref="form"
            method="POST"
            action="{{ $generateUrl }}"
            enctype="multipart/form-data"
            @submit.prevent="handleSubmit($event)"
            class="space-y-6"
        >
            @csrf

            <div class="space-y-2">
                <label class="text-sm font-medium text-zinc-800 dark:text-zinc-100" for="hand_photo">
                    {{ __('Hand Photo (required)') }}
                </label>
                <input
                    id="hand_photo"
                    name="hand_photo"
                    type="file"
                    accept="image/*"
                    required
                    class="block w-full text-sm text-zinc-700 file:mr-4 file:rounded-md file:border-0 file:bg-zinc-100 file:px-4 file:py-2 file:text-zinc-700 hover:file:bg-zinc-200 dark:text-zinc-200 dark:file:bg-zinc-800 dark:file:text-zinc-100"
                />
                <p class="text-xs text-zinc-500 rtl:text-right">
                    {{ __('Tip: use good lighting and keep your hand steady for best results.') }}
                </p>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="space-y-2">
                    <label class="text-sm font-medium text-zinc-800 dark:text-zinc-100" for="color">
                        {{ __('Color') }}
                    </label>
                    <select
                        id="color"
                        name="color"
                        class="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    >
                        <option value="nude">{{ __('Nude / Natural') }}</option>
                        <option value="red">{{ __('Red') }}</option>
                        <option value="pink">{{ __('Pink') }}</option>
                        <option value="black">{{ __('Black') }}</option>
                        <option value="white">{{ __('White') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-medium text-zinc-800 dark:text-zinc-100" for="style">
                        {{ __('Style') }}
                    </label>
                    <select
                        id="style"
                        name="style"
                        class="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    >
                        <option value="classic">{{ __('Classic') }}</option>
                        <option value="glossy">{{ __('Glossy') }}</option>
                        <option value="matte">{{ __('Matte') }}</option>
                        <option value="french">{{ __('French Tips') }}</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="space-y-2">
                    <label class="text-sm font-medium text-zinc-800 dark:text-zinc-100" for="event">
                        {{ __('Event') }}
                    </label>
                    <select
                        id="event"
                        name="event"
                        class="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    >
                        <option value="daily">{{ __('Daily') }}</option>
                        <option value="wedding">{{ __('Wedding') }}</option>
                        <option value="party">{{ __('Party / Night Out') }}</option>
                        <option value="holiday">{{ __('Holiday') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-medium text-zinc-800 dark:text-zinc-100" for="treatment_type">
                        {{ __('Treatment Type') }}
                    </label>
                    <select
                        id="treatment_type"
                        name="treatment_type"
                        class="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    >
                        <option value="standard">{{ __('Standard Manicure') }}</option>
                        <option value="extensions">{{ __('Extensions') }}</option>
                        <option value="3d_art">{{ __('3D Art (Premium)') }}</option>
                    </select>
                </div>
            </div>

            <div class="flex items-center justify-end rtl:justify-start">
                <button
                    type="submit"
                    @click="playAudio()"
                    class="inline-flex items-center justify-center rounded-lg bg-[#FF2D20] px-6 py-3 text-sm font-semibold text-white shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] hover:opacity-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FF2D20]/60"
                    :disabled="isSubmitting"
                >
                    <span x-text="isSubmitting ? '{{ __('Generating...') }}' : '{{ __('Generate Design') }}'"></span>
                </button>
            </div>
        </form>
    </div>

    <!-- Waiting Room -->
    <div
        x-show="mode === 'waiting'"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4"
    >
        <div class="w-full max-w-xl rounded-2xl bg-white p-6 shadow-xl dark:bg-zinc-900">
            <div class="flex items-center justify-between gap-4">
                <div class="space-y-2">
                    <h3 class="text-lg font-semibold text-zinc-900 dark:text-white">
                        {{ __('Designing in Progress') }}
                    </h3>
                    <p class="text-sm text-zinc-600 dark:text-zinc-300">
                        {{ __('Please wait while we craft your premium nail design...') }}
                    </p>
                </div>
                <div class="relative flex h-16 w-16 items-center justify-center">
                    <div class="absolute inset-0 rounded-full border border-[#FF2D20]/20"></div>
                    <div class="nails-pulse absolute inset-2 rounded-full border-2 border-[#FF2D20]"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <svg class="h-8 w-8 text-[#FF2D20]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M12 2v2m0 18v-2m10-8h-2M4 12H2m18.364 6.364-1.414-1.414M6.05 6.05 4.636 4.636m12.728 0-1.414 1.414M6.05 17.95l-1.414 1.414" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="mt-6">
                <div class="h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                    <div class="h-full w-full origin-left scale-x-0 bg-gradient-to-r from-[#FF2D20] to-zinc-900 dark:to-zinc-300 animate-pulse"></div>
                </div>
                <p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400">
                    {{ __('We are analyzing your photo. This typically takes a few moments.') }}
                </p>
            </div>

            <div class="mt-6 text-center text-xs text-zinc-500 dark:text-zinc-400">
                {{ __('Keep this page open.') }}
            </div>
        </div>
    </div>

    <!-- Error Modal -->
    <div
        x-show="mode === 'error'"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4"
    >
        <div
            class="w-full max-w-lg rounded-2xl bg-white p-6 shadow-xl dark:bg-zinc-900"
            role="dialog"
            aria-modal="true"
            aria-labelledby="ai-error-title"
        >
            <div class="flex items-start gap-3">
                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-200">
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 9v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="flex-1">
                    <h4 id="ai-error-title" class="text-base font-semibold text-zinc-900 dark:text-white">
                        {{ __('Generation Failed') }}
                    </h4>
                    <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
                        {{ __('Please upload a clearer photo of your hand.') }}
                    </p>
                    <div class="mt-4 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-xs text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/30 dark:text-zinc-300">
                        {{ __('If possible, use better lighting and keep your hand flat to the camera.') }}
                    </div>
                </div>
            </div>

            <div class="mt-6 flex items-center justify-end gap-3 rtl:flex-row-reverse">
                <button
                    type="button"
                    @click="mode='upload'; isSubmitting=false;"
                    class="inline-flex items-center justify-center rounded-lg border border-zinc-200 bg-white px-4 py-2 text-sm font-semibold text-zinc-900 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                >
                    {{ __('Try Again') }}
                </button>
            </div>
        </div>
    </div>

    <!-- Success View (optional placeholder for next Phase) -->
    <div x-show="mode === 'result'" x-transition.opacity.duration.200 class="mt-8 space-y-4">
        <template x-if="generatedImageUrl">
            <div class="rounded-xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
                <img
                    :src="generatedImageUrl"
                    alt="Generated nail design"
                    class="w-full rounded-lg object-cover"
                    loading="lazy"
                />

                <div class="mt-4 flex items-center justify-between gap-3 rtl:space-x-reverse rtl:flex-row-reverse">
                    <a
                        class="inline-flex items-center justify-center rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white hover:opacity-95 dark:bg-white dark:text-zinc-900"
                        :href="generatedImageUrl"
                        download
                    >
                        {{ __('Download') }}
                    </a>

                    <template x-if="showPremiumUpsell">
                        <a
                            class="inline-flex items-center justify-center rounded-lg border border-[#FF2D20] px-4 py-2 text-sm font-semibold text-[#FF2D20] hover:bg-[#FF2D20]/10"
                            :href="premiumUpsellUrl"
                        >
                            {{ __('Upgrade to Premium Service') }}
                        </a>
                    </template>
                </div>
            </div>
        </template>
    </div>

    <script>
        function designYourNailsStudio({ generateUrl, csrfToken }) {
            return {
                mode: 'upload',
                generatedImageUrl: null,
                isSubmitting: false,
                showPremiumUpsell: false,
                premiumUpsellUrl: '/book?service=premium',
                generateUrl,
                csrfToken,

                init() {
                    // Ensure consistent defaults.
                    this.generatedImageUrl = null;
                    this.showPremiumUpsell = false;
                },

                playAudio() {
                    // Must be triggered by the submit button click to satisfy browser autoplay policies.
                    try {
                        const audio = new Audio('/audio/waiting-room.mp3');
                        audio.volume = 0.5;
                        audio.play().catch(() => {});
                    } catch (e) {
                        // Swallow audio errors; the UI must still work.
                    }
                },

                isPremiumEligibleFromFormData(formData) {
                    const treatment = String(formData.get('treatment_type') || '');
                    const style = String(formData.get('style') || '');

                    // Simple heuristic: extensions or 3D art implies premium.
                    return treatment === 'extensions' || treatment === '3d_art' || style === 'french';
                },

                async handleSubmit(event) {
                    if (this.isSubmitting) return;
                    this.isSubmitting = true;
                    this.mode = 'waiting';

                    const formEl = this.$refs.form;
                    const formData = new FormData(formEl);

                    this.showPremiumUpsell = this.isPremiumEligibleFromFormData(formData);
                    this.premiumUpsellUrl = '/book?service=premium';

                    const controller = new AbortController();
                    const timeout = setTimeout(() => controller.abort(), 30000);

                    try {
                        const res = await fetch(this.generateUrl, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': this.csrfToken,
                            },
                            signal: controller.signal,
                        });

                        clearTimeout(timeout);

                        if (!res.ok) {
                            throw new Error('request_failed');
                        }

                        const data = await res.json();
                        this.generatedImageUrl = data.image_url || data.image || null;

                        if (!this.generatedImageUrl) {
                            throw new Error('missing_image_url');
                        }

                        this.mode = 'result';
                    } catch (e) {
                        // Any failure (including timeouts) lands on the branded fallback modal.
                        this.mode = 'error';
                    } finally {
                        this.isSubmitting = false;
                    }
                }
            };
        }
    </script>
</section>