@props([
    'connection',
    'ad',
    'redirectTo' => 'show',
    'variant' => 'button',
])

@php
    $initialPostName = old('post_name', $ad->post_name ?? '');
    $initialResultType = old('result_type', $ad->result_type ?? \App\Models\MetaAd::RESULT_TYPE_INTERACTION);
    $modalEventName = 'open-meta-ad-config-'.$ad->id;
    $isTable = $variant === 'table';
@endphp

@if ($isTable)
    <button type="button"
            x-data
            x-on:click.prevent="window.dispatchEvent(new CustomEvent(@js($modalEventName)))"
            class="inline-flex items-center justify-center rounded-md border p-2 transition {{ $ad->post_name ? 'border-slate-200 text-slate-600 hover:border-rose-200 hover:bg-rose-50 hover:text-[#E83646]' : 'border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100' }}"
            title="{{ $ad->post_name ? 'Modifier la configuration publication' : 'Configurer la publication' }}"
            aria-label="Configuration publication">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.36 1.416.624l1.413-.545a1 1 0 011.27.21l.962.962a1 1 0 01.21 1.27l-.545 1.413c.264.445.48.919.624 1.416l1.473.294A1 1 0 0118 9.32v1.36a1 1 0 01-.804.98l-1.473.295a6.07 6.07 0 01-.624 1.416l.545 1.413a1 1 0 01-.21 1.27l-.962.962a1 1 0 01-1.27.21l-1.413-.545a6.07 6.07 0 01-1.416.624l-.294 1.473A1 1 0 019.32 19h-1.36a1 1 0 01-.98-.804l-.295-1.473a6.07 6.07 0 01-1.416-.624l-1.413.545a1 1 0 01-1.27-.21l-.962-.962a1 1 0 01-.21-1.27l.545-1.413a6.07 6.07 0 01-.624-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.36-.971.624-1.416l-.545-1.413a1 1 0 01.21-1.27l.962-.962a1 1 0 011.27-.21l1.413.545c.445-.264.919-.48 1.416-.624l.294-1.473zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
        </svg>
    </button>
@else
    <button type="button"
            x-data
            x-on:click.prevent="window.dispatchEvent(new CustomEvent(@js($modalEventName)))"
            @class([
                'inline-flex items-center rounded-lg px-4 py-2 text-sm font-semibold',
                'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50' => $redirectTo === 'ad',
                'text-xs font-semibold text-slate-700 hover:text-[#E83646]' => $redirectTo !== 'ad',
            ])>
        Set conf
    </button>
@endif

<div x-data="{
        open: false,
        postName: @js($initialPostName),
        resultType: @js($initialResultType),
     }"
     x-on:{{ $modalEventName }}.window="open = true"
     x-on:keydown.escape.window="open = false">
    <template x-teleport="body">
        <div x-show="open"
             x-cloak
             class="fixed inset-0 z-[100] overflow-y-auto px-4 py-6 sm:px-0"
             style="display: none;">
            <div x-show="open"
                 x-transition:enter="ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 class="fixed inset-0 bg-slate-500/75"
                 @click="open = false"></div>

            <div x-show="open"
                 x-transition:enter="ease-out duration-200"
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 class="relative mx-auto w-full max-w-lg rounded-lg bg-white shadow-xl"
                 @click.stop>
                <form method="POST" action="{{ route('integrations.meta.ads.config.store', [$connection, $ad]) }}" class="p-6">
                    @csrf
                    <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">

                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h3 class="text-lg font-semibold text-slate-900">Configuration publication</h3>
                            <p class="mt-1 text-sm text-slate-500">
                                {{ $ad->ad_name ?: $ad->ad_id }}
                            </p>
                        </div>
                        <button type="button" @click="open = false"
                                class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600">
                            <span class="sr-only">Fermer</span>
                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
                            </svg>
                        </button>
                    </div>

                    <div class="mt-6">
                        <label for="post-name-{{ $ad->id }}" class="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-500">
                            Nom de publication
                        </label>
                        <input id="post-name-{{ $ad->id }}"
                               type="text"
                               name="post_name"
                               x-model="postName"
                               required
                               maxlength="255"
                               placeholder="Ex: Promo ete 2026"
                               class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-[#E83646] focus:ring-[#E83646]">
                        <p class="mt-1 text-xs text-slate-500">Plusieurs ads peuvent partager le meme nom de publication.</p>
                    </div>

                    <div class="mt-6 space-y-3">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Type d'objectif</p>

                        <label class="flex cursor-pointer items-start gap-3 rounded-xl border p-4 transition"
                               :class="resultType === 'interaction' ? 'border-sky-300 bg-sky-50/50' : 'border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="result_type" value="interaction" x-model="resultType"
                                   class="mt-1 border-slate-300 text-sky-600 focus:ring-sky-500">
                            <span>
                                <span class="block text-sm font-semibold text-slate-900">Interaction</span>
                                <span class="mt-1 block text-xs text-slate-500">Engagements, clics et interactions sur la publication.</span>
                            </span>
                        </label>

                        <label class="flex cursor-pointer items-start gap-3 rounded-xl border p-4 transition"
                               :class="resultType === 'conversion' ? 'border-emerald-300 bg-emerald-50/50' : 'border-slate-200 hover:bg-slate-50'">
                            <input type="radio" name="result_type" value="conversion" x-model="resultType"
                                   class="mt-1 border-slate-300 text-emerald-600 focus:ring-emerald-500">
                            <span>
                                <span class="block text-sm font-semibold text-slate-900">Couverture</span>
                                <span class="mt-1 block text-xs text-slate-500">Conversions, leads et resultats de campagne.</span>
                            </span>
                        </label>
                    </div>

                    <div class="mt-6 flex flex-wrap justify-end gap-3 border-t border-slate-100 pt-4">
                        <button type="button" @click="open = false"
                                class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">
                            Annuler
                        </button>
                        <button type="submit"
                                :disabled="postName.trim() === ''"
                                :class="postName.trim() === '' ? 'opacity-50 cursor-not-allowed' : 'hover:bg-rose-600'"
                                class="rounded-lg bg-[#E83646] px-4 py-2 text-sm font-semibold text-white">
                            Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>