import axios from 'axios';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

// Global verfügbar machen damit Alpine-Komponenten via window.maplibregl rangehen.
window.maplibregl = maplibregl;

window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 8080,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 8080,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'http') === 'https',
    enabledTransports: ['ws', 'wss'],
});

// Genau EIN globaler Channel-Listener für LLM-Antworten via Reverb.
// Audio-Events bubblen via window-Event nach Alpine (Speaking-Indikator).
let __foxAudio = null;
const fireSpeak = (on) => window.dispatchEvent(new CustomEvent('fox-speaking', { detail: on }));

window.Echo.channel('fox').listen('.message.created', (payload) => {
    const url = payload?.metadata?.audio_url;
    if (!url) return;
    try {
        if (__foxAudio) { __foxAudio.pause(); __foxAudio.src = ''; }
        __foxAudio = new Audio(url);
        __foxAudio.addEventListener('play',  () => fireSpeak(true));
        __foxAudio.addEventListener('ended', () => fireSpeak(false));
        __foxAudio.addEventListener('pause', () => fireSpeak(false));
        __foxAudio.addEventListener('error', () => fireSpeak(false));
        __foxAudio.play().catch(err => { fireSpeak(false); console.warn('Audio blocked:', err); });
    } catch (e) {
        console.warn('Audio playback error:', e);
        fireSpeak(false);
    }
});