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

@php
    $modalEventName = 'open-meta-ad-copy-'.$ad->id;
    $storeUrl = route('integrations.meta.ads.copy.store', [$connection, $ad]);
    $isTable = $variant === 'table';
@endphp

@if ($destinationConnections->isNotEmpty())
    @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 border-slate-200 p-2 text-violet-600 hover:border-violet-200 hover:bg-violet-50"
                title="Dupliquer vers un autre compte"
                aria-label="Dupliquer vers un autre compte">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"/>
                <path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"/>
            </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',
                    'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' => $redirectTo === 'ad',
                    'text-xs font-semibold text-slate-700 hover:text-[#E83646]' => $redirectTo !== 'ad',
                ])>
            Copier vers un compte
        </button>
    @endif

    <div x-data="{ open: false, copyAlert: false }"
         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="{{ $storeUrl }}" 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">Copier vers un autre compte</h3>
                                <p class="mt-1 text-sm text-slate-500">
                                    Duplique cette ad dans un autre compte de l'application avec le meme nom, la meme configuration et les memes metriques (lifetime et journalieres) pour l'inclure dans le rapport.
                                </p>
                                <p class="mt-2 text-xs text-slate-400">
                                    Utile si l'ad a tourne sur un compte de secours ou un mauvais compte Facebook, puis doit apparaitre dans le rapport du compte d'origine.
                                </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="copy-destination-connection-{{ $ad->id }}" class="mb-2 block text-xs font-semibold uppercase tracking-wider text-slate-500">
                                Compte publicitaire de destination
                            </label>
                            <select id="copy-destination-connection-{{ $ad->id }}"
                                    name="target_connection_id"
                                    required
                                    class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-[#E83646] focus:ring-[#E83646]">
                                <option value="">Selectionnez un compte</option>
                                @foreach ($destinationConnections as $destinationConnection)
                                    <option value="{{ $destinationConnection->id }}" @selected((int) old('target_connection_id') === $destinationConnection->id)>
                                        {{ $destinationConnection->ad_account_name }} ({{ $destinationConnection->ad_account_id }})
                                    </option>
                                @endforeach
                            </select>
                            @error('target_connection_id')
                                <p class="mt-1 text-xs text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mt-4 rounded-xl border border-slate-200 bg-slate-50/80 p-4 text-xs text-slate-600">
                            <p class="font-semibold text-slate-800">Copie complete dans l'application :</p>
                            <ul class="mt-2 list-disc space-y-1 pl-4">
                                <li>Nom d'ad, campagne et ad set</li>
                                <li>Configuration publication et objectif</li>
                                <li>Metriques lifetime et journalieres</li>
                            </ul>
                            <p class="mt-2 text-slate-500">Aucune modification dans Facebook Ads Manager. La copie est conservee lors des synchronisations Meta.</p>
                        </div>

                        <label class="mt-4 flex items-start gap-2 text-sm text-slate-700">
                            <input type="checkbox"
                                   name="copy_alert"
                                   value="1"
                                   x-model="copyAlert"
                                   class="mt-0.5 rounded border-slate-300 text-[#E83646] focus:ring-[#E83646]">
                            <span>Copier aussi mon alerte email configuree sur cette ad</span>
                        </label>

                        @error('copy')
                            <p class="mt-3 text-xs text-rose-600">{{ $message }}</p>
                        @enderror

                        <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"
                                    class="rounded-lg bg-[#E83646] px-4 py-2 text-sm font-semibold text-white hover:bg-rose-600">
                                Dupliquer dans ce compte
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </template>
    </div>
@endif