@php
    $statusStyles = [
        \App\Models\OrderItem::STATUS_PENDING => [
            'chip' =>
                'bg-amber-100 text-amber-800 ring-amber-200 dark:bg-amber-900/40 dark:text-amber-100 dark:ring-amber-800/60',
            'dot' => 'bg-amber-500',
            'header' => 'bg-gradient-to-r from-amber-50 to-amber-100/70 dark:from-amber-950/40 dark:to-amber-900/30',
        ],
        \App\Models\OrderItem::STATUS_PREPARING => [
            'chip' =>
                'bg-indigo-100 text-indigo-800 ring-indigo-200 dark:bg-indigo-900/40 dark:text-indigo-100 dark:ring-indigo-800/60',
            'dot' => 'bg-indigo-500',
            'header' =>
                'bg-gradient-to-r from-indigo-50 to-indigo-100/70 dark:from-indigo-950/40 dark:to-indigo-900/30',
        ],
        \App\Models\OrderItem::STATUS_READY => [
            'chip' =>
                'bg-emerald-100 text-emerald-800 ring-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-100 dark:ring-emerald-800/60',
            'dot' => 'bg-emerald-500',
            'header' =>
                'bg-gradient-to-r from-emerald-50 to-emerald-100/70 dark:from-emerald-950/40 dark:to-emerald-900/30',
        ],
    ];

    $kitchenSound = asset('sounds/notify.mp3');
@endphp

<div class="mx-auto space-y-6 p-4 md:p-6" @if ($autoRefresh) wire:poll.{{ $refreshInterval }} @endif
    x-data="{ draggingId: null }" x-on:kanban-drag.window="draggingId = $event.detail.id" data-total="{{ $activeTotal }}">
    <div
        class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] p-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="space-y-1">
            <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                {{ __('dashboard.kitchen_tickets.title') }}</p>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                {{ $currentKitchen->name ?? __('dashboard.kitchen_tickets.all_kitchens') }}
            </h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                {{ $currentKitchen?->branch?->name ?? __('dashboard.kitchen_tickets.global_view') }}
            </p>
        </div>
        <div class="flex flex-wrap items-center gap-3 lg:justify-end">
            @if (! $headerBranchId)
                <x-ui.input.select wire:model.live="selectedBranchId" :label="__('dashboard.select_branch')" class="w-48">
                    <option value="">{{ __('dashboard.select_branch') }}</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </x-ui.input.select>
            @endif
            <x-ui.input.select wire:model.live="datePreset" :label="__('dashboard.date_filter')" class="w-44">
                <option value="">{{ __('dashboard.select') }}</option>
                <option value="all">{{ __('dashboard.all_orders') }}</option>
                <option value="today">{{ __('dashboard.today_orders') }}</option>
                <option value="tomorrow">{{ __('dashboard.tomorrow_orders') }}</option>
            </x-ui.input.select>
            <div class="flex flex-col">
                <x-ui.input.switch wire:model.live="autoRefresh" :checked="$autoRefresh" :label="__('dashboard.auto_refresh')" />
                <x-ui.input.select wire:model.live="refreshInterval" :disabled="!$autoRefresh" class="w-28">
                    @foreach ($refreshIntervalOptions as $option)
                        <option value="{{ $option }}">{{ $option }}</option>
                    @endforeach
                </x-ui.input.select>
            </div>
        </div>
    </div>

    <x-ui.toast on="kitchen-order-arrived">
        {{ __('dashboard.kitchen_tickets.new_order') }}
    </x-ui.toast>

    <div class="grid gap-5 xl:grid-cols-3">
        @foreach ($statusMeta as $statusKey => $meta)
            @php $style = $statusStyles[$statusKey] ?? []; @endphp
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] min-h-[440px]"
                @dragover.prevent="$event.dataTransfer.dropEffect = 'move'"
                @drop.prevent="if (draggingId) { $wire.handleDrop(draggingId, '{{ $statusKey }}'); } draggingId = null"
                :class="draggingId ? 'ring-2 ring-offset-2 ring-slate-300/70 dark:ring-slate-700/60 dark:ring-offset-gray-950' :
                    ''">
                <div
                    class="flex items-center justify-between gap-3 border-b border-gray-100 px-4 py-4 backdrop-blur-sm dark:border-gray-800 {{ $style['header'] ?? 'bg-gray-50/90 dark:bg-gray-800/70' }} rounded-t-2xl">
                    <div class="space-y-0.5">
                        <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $meta['label'] }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $meta['hint'] }}</p>
                    </div>
                    <div
                        class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold ring-1 {{ $style['chip'] ?? 'bg-gray-100 text-gray-700 ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700' }}">
                        <span class="h-2 w-2 rounded-full {{ $style['dot'] ?? 'bg-gray-500' }}"></span>
                        {{ __('dashboard.kitchen_tickets.orders_count', ['count' => $statusCounts[$statusKey] ?? 0]) }}
                    </div>
                </div>

                <div class="flex flex-1 flex-col gap-4 px-4 py-4">
                    @forelse ($kanbanOrders[$statusKey] ?? [] as $orderCard)
                        <livewire:kitchen.order-card :order-card="$orderCard" :status-key="$statusKey" :current-kitchen="$currentKitchen"
                            :key="'order-card-' . $statusKey . '-' . ($orderCard['order']->id ?? 'unknown')" />
                    @empty
                        <div
                            class="flex flex-1 items-center justify-center rounded-2xl border border-dashed border-gray-200 bg-gray-50/60 px-4 py-6 text-xs text-gray-500 dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-400 min-h-[340px]">
                            {{ __('dashboard.kitchen_tickets.empty_column') }}
                        </div>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>
</div>

<script>
    (() => {
        if (window.kitchenSoundState) return;

        const state = {
            audio: null,
            lastTotal: 0,
            unlocked: false,
            pendingPlay: false,
            initialized: false,
            init(soundUrl) {
                this.audio = this.audio || new Audio(soundUrl);
                this.initialized = true;
                this.autoUnlock();
            },
            autoUnlock() {
                if (!this.audio || this.unlocked) return;
                this.audio.muted = true;
                this.audio.play().then(() => {
                    this.audio.pause();
                    this.audio.muted = false;
                    this.audio.currentTime = 0;
                    this.unlocked = true;
                    if (this.pendingPlay) {
                        this.play();
                        this.pendingPlay = false;
                    }
                }).catch(() => {
                    window.addEventListener('pointerdown', () => this.unlock(), {
                        once: true
                    });
                });
            },
            unlock() {
                if (this.unlocked || !this.audio) return;
                this.audio.muted = true;
                this.audio.play().then(() => {
                    this.audio.pause();
                    this.audio.muted = false;
                    this.audio.currentTime = 0;
                    this.unlocked = true;
                    if (this.pendingPlay) {
                        this.play();
                        this.pendingPlay = false;
                    }
                }).catch(() => {});
            },
            play() {
                if (!this.audio) return;
                this.audio.currentTime = 0;
                this.audio.play().catch(() => {});
            },
            handleTotal(total) {
                const parsed = parseInt(total, 10) || 0;
                if (!this.initialized) {
                    this.lastTotal = parsed;
                    return;
                }
                if (parsed > this.lastTotal) {
                    if (this.unlocked) {
                        this.play();
                    } else {
                        this.pendingPlay = true;
                    }
                }
                this.lastTotal = parsed;
            },
        };

        const register = () => {
            if (!window.Livewire || register.done) return;
            register.done = true;

            window.Livewire.on('kitchen-tickets-total', ({
                total
            }) => state.handleTotal(total));
            window.addEventListener('pointerdown', () => state.unlock(), {
                once: true
            });
            state.init('{{ $kitchenSound }}');
        };

        document.addEventListener('livewire:load', register);
        document.addEventListener('livewire:navigated', register);

        window.kitchenSoundState = state;
    })();
</script>