@php
    $statusClasses = match($autoReplyStatus) {
        'enabled' => 'text-green-600',
        'error' => 'text-red-600',
        default => 'text-gray-500',
    };
    $statusDotClasses = match($autoReplyStatus) {
        'enabled' => 'bg-green-500',
        'error' => 'bg-red-500',
        default => 'bg-gray-400',
    };
@endphp
<div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm">
    <div class="flex items-center gap-2">
        <span class="text-xs font-medium text-gray-600 whitespace-nowrap">Auto-reply</span>
        <button type="button"
                wire:click="toggleAutoReply"
                wire:loading.attr="disabled"
                wire:target="toggleAutoReply"
                @if($autoReplyProcessing || $isGated) disabled @endif
                class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed {{ $autoreply ? 'bg-blue-600' : 'bg-gray-200' }}"
                role="switch"
                aria-checked="{{ $autoreply ? 'true' : 'false' }}">
            <span class="sr-only">Toggle auto-reply</span>
            <span aria-hidden="true"
                  class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition duration-200 ease-in-out {{ $autoreply ? 'translate-x-4' : 'translate-x-0' }}"></span>
        </button>
        <span wire:loading wire:target="toggleAutoReply" class="inline-block">
            <svg class="animate-spin h-3.5 w-3.5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </span>
    </div>

    <div class="flex items-center gap-1.5">
        <span class="text-xs font-medium text-gray-600 whitespace-nowrap">Reply After</span>
        <select wire:model.live="autoReplyDelayMinutes"
                wire:loading.attr="disabled"
                wire:target="autoReplyDelayMinutes,toggleAutoReply"
                class="text-xs rounded-md border-gray-300 py-1 pl-2 pr-7 disabled:opacity-50 disabled:cursor-not-allowed">
            <option value="0">Immediate</option>
            <option value="60">1h</option>
            <option value="180">3h</option>
            <option value="720">12h</option>
            <option value="1440">24h</option>
        </select>
    </div>

    <div class="flex items-center gap-1.5">
        <span class="text-xs font-medium text-gray-600 whitespace-nowrap">Reply tone</span>
        <select wire:model.live="defaultReplyTone"
                wire:loading.attr="disabled"
                class="text-xs rounded-md border-gray-300 py-1 pl-2 pr-7 disabled:opacity-50 disabled:cursor-not-allowed">
            @foreach(config('reply_tones.labels', []) as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>
    </div>

    <div class="flex items-center gap-2">
        <div class="relative flex items-center gap-1" x-data="{ aiAttrInfoOpen: false }">
            <span class="text-xs font-medium text-gray-600 whitespace-nowrap">AI Attribute</span>
            <button type="button"
                    @click="aiAttrInfoOpen = !aiAttrInfoOpen"
                    @click.outside="aiAttrInfoOpen = false"
                    class="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border border-gray-300 text-[10px] font-bold leading-none text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
                    aria-label="What is AI Attribute?"
                    :aria-expanded="aiAttrInfoOpen">
                i
            </button>
            <div x-show="aiAttrInfoOpen"
                 x-transition
                 class="absolute left-0 top-full z-50 mt-2 w-64 rounded-lg border border-gray-200 bg-white p-3 text-xs text-gray-600 shadow-lg"
                 style="display: none;">
                <p class="mb-1 font-semibold text-gray-900">AI Attribute</p>
                <p>When on, replies weave in the exact quality the customer mentioned — for example &ldquo;transparent pricing&rdquo; or &ldquo;friendly team&rdquo; — in a natural way.</p>
                <p class="mt-2">This runs on top of your selected reply tone. Optional; off by default.</p>
            </div>
        </div>
        <button type="button"
                wire:click="toggleAiAttributeEnabled"
                wire:loading.attr="disabled"
                class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 {{ $aiAttributeEnabled ? 'bg-blue-600' : 'bg-gray-200' }}"
                role="switch"
                aria-checked="{{ $aiAttributeEnabled ? 'true' : 'false' }}">
            <span class="sr-only">Toggle AI attribute layer</span>
            <span aria-hidden="true"
                  class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition duration-200 ease-in-out {{ $aiAttributeEnabled ? 'translate-x-4' : 'translate-x-0' }}"></span>
        </button>
    </div>

    <div class="flex items-center gap-2">
        <span class="text-xs font-medium text-gray-600 whitespace-nowrap">Email</span>
        <button type="button"
                wire:click="toggleReviewNotificationEmail"
                wire:loading.attr="disabled"
                wire:target="toggleReviewNotificationEmail"
                class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 {{ $reviewNotificationEmailEnabled ? 'bg-blue-600' : 'bg-gray-200' }}"
                role="switch"
                aria-checked="{{ $reviewNotificationEmailEnabled ? 'true' : 'false' }}">
            <span class="sr-only">Toggle review email alerts</span>
            <span aria-hidden="true"
                  class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition duration-200 ease-in-out {{ $reviewNotificationEmailEnabled ? 'translate-x-4' : 'translate-x-0' }}"></span>
        </button>
    </div>

    <div class="flex items-center gap-1.5 text-xs">
        <span class="inline-block h-2 w-2 rounded-full {{ $statusDotClasses }}"></span>
        <span class="text-gray-600">Status:</span>
        <span class="font-medium {{ $statusClasses }}">{{ ucfirst($autoReplyStatus) }}</span>
    </div>
</div>

@if($autoReplyLastError || $isGated)
    <div class="basis-full w-full text-center text-xs">
        @if($autoReplyLastError)
            <p class="text-red-600">{{ $autoReplyLastError }}</p>
        @endif
        @if($isGated)
            <p class="text-amber-600">Upgrade your plan to enable auto-reply.</p>
        @endif
    </div>
@endif