import './bootstrap';
import Alpine from 'alpinejs';
import sort from '@alpinejs/sort';

Alpine.plugin(sort);
window.Alpine = Alpine;
Alpine.start();

// Meow sound toggle (stored in localStorage)
window.KolManager = {
    meowEnabled: localStorage.getItem('meow') !== 'false',

    toggleMeow() {
        this.meowEnabled = !this.meowEnabled;
        localStorage.setItem('meow', this.meowEnabled);
    },

    playMeow() {
        if (!this.meowEnabled) return;
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const o   = ctx.createOscillator();
        const g   = ctx.createGain();
        o.connect(g);
        g.connect(ctx.destination);
        o.type = 'sine';
        o.frequency.setValueAtTime(880, ctx.currentTime);
        o.frequency.exponentialRampToValueAtTime(1200, ctx.currentTime + 0.05);
        o.frequency.exponentialRampToValueAtTime(900, ctx.currentTime + 0.15);
        g.gain.setValueAtTime(0.3, ctx.currentTime);
        g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
        o.start(ctx.currentTime);
        o.stop(ctx.currentTime + 0.3);
    },

    notify(msg) {
        this.playMeow();
        const el = document.createElement('div');
        el.className = 'fixed top-4 right-4 z-50 cat-card px-5 py-3 flex items-center gap-2 shadow-lg border border-pink-200 animate-bounce';
        el.innerHTML = `<span class="text-xl">🐱</span><span class="text-sm font-medium text-pink-700">${msg}</span>`;
        document.body.appendChild(el);
        setTimeout(() => el.remove(), 3500);
    },
};

// Flash message auto-dismiss
document.addEventListener('DOMContentLoaded', () => {
    const flash = document.getElementById('flash-message');
    if (flash) {
        window.KolManager.playMeow();
        setTimeout(() => {
            flash.style.opacity = '0';
            flash.style.transform = 'translateY(-10px)';
            flash.style.transition = 'all 0.4s ease';
            setTimeout(() => flash.remove(), 400);
        }, 3000);
    }
});