<x-layouts::app.sidebar :title="$title ?? null">
    <flux:main>
        {{ $slot }}
    </flux:main>

        <div
            x-data="toastSystem()"
            x-on:notify.window="show($event.detail)"
            class="fixed top-5 right-5 z-50 space-y-4"
        >
            <template x-for="toast in toasts" :key="toast.id">
                <div
                    x-show="toast.visible"
                    x-cloak
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-x-8 scale-95"
                    x-transition:enter-end="opacity-100 translate-x-0 scale-100"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0 translate-x-8 scale-95"
                    class="relative min-w-[320px] max-w-sm rounded-xl shadow-2xl border overflow-hidden backdrop-blur"
                    :class="toast.wrapperClass"
                >

                    <div class="flex items-start gap-3 p-4">

                        <!-- Icon -->
                        <div class="mt-0.5">
                            <svg x-show="toast.type === 'success'" class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                            </svg>

                            <svg x-show="toast.type === 'error'" class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                            </svg>

                            <svg x-show="toast.type === 'info'" class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4M12 8h.01"/>
                            </svg>
                        </div>

                        <!-- Content -->
                        <div class="flex-1">
                            <div class="font-semibold text-sm" x-text="toast.title"></div>
                            <div class="text-sm opacity-80 mt-1" x-text="toast.message"></div>
                        </div>

                        <!-- Close Button -->
                        <button @click="remove(toast.id)" class="text-zinc-400 hover:text-zinc-600 transition">
                            ✕
                        </button>

                    </div>

                    <!-- Progress Bar -->
                    <div class="h-1 bg-black/5">
                        <div
                            class="h-1 transition-all linear"
                            :class="toast.progressClass"
                            :style="`width: ${toast.progress}%`"
                        ></div>
                    </div>

                </div>
            </template>
        </div>

        <script>
        function toastSystem() {
            return {
                toasts: [],

                show(detail) {
                    console.log('Toast detail:', detail); // ← tambahkan ini
                    const id = Date.now() + Math.random();

                    const type = detail.type ?? 'info';
                    const timeout = detail.timeout ?? 4000;

                    const styles = {
                        success: {
                            wrapper: 'bg-white border-green-200 text-zinc-800',
                            progress: 'bg-green-500'
                        },
                        error: {
                            wrapper: 'bg-white border-red-200 text-zinc-800',
                            progress: 'bg-red-500'
                        },
                        info: {
                            wrapper: 'bg-white border-blue-200 text-zinc-800',
                            progress: 'bg-blue-500'
                        }
                    };

                    const toast = {
                        id,
                        type,
                        title: detail.title ?? '',
                        message: detail.message ?? '',
                        timeout,
                        visible: true,
                        progress: 100,
                        wrapperClass: styles[type].wrapper,
                        progressClass: styles[type].progress
                    };

                    this.toasts.push(toast);

                    const interval = 50;
                    const step = 100 / (timeout / interval);

                    const progressTimer = setInterval(() => {
                        toast.progress -= step;
                        if (toast.progress <= 0) {
                            clearInterval(progressTimer);
                        }
                    }, interval);

                    setTimeout(() => {
                        this.remove(id);
                    }, timeout);
                },

                remove(id) {
                    const toast = this.toasts.find(t => t.id === id);
                    if (!toast) return;

                    toast.visible = false;

                    setTimeout(() => {
                        this.toasts = this.toasts.filter(t => t.id !== id);
                    }, 250);
                }
            }
        }
        </script>

        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.on('toast', (data) => {
                    window.dispatchEvent(
                        new CustomEvent('notify', { detail: data })
                    );
                });
            });
        </script>

        @if(session('notify'))
            <div
                x-data
                x-init="
                    setTimeout(() => {
                        window.dispatchEvent(
                            new CustomEvent('notify', {
                                detail: {{ Illuminate\Support\Js::from(session('notify')) }}
                            })
                        )
                    }, 50)
                "
            ></div>
        @endif


</x-layouts::app.sidebar>
