import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

// Reverb (Pusher protocol). Host/port/scheme are env-driven (derived from APP_DOMAIN later).
window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: Number(import.meta.env.VITE_REVERB_PORT ?? 80),
    wssPort: Number(import.meta.env.VITE_REVERB_PORT ?? 443),
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

// Live CPU chart island: seeds from server-rendered data, then appends each
// MetricsTicked broadcast and redraws the sparkline (viewBox 0 0 300 80).
document.addEventListener('alpine:init', () => {
    window.Alpine.data('metricsChart', (seed = [], max = 40) => ({
        points: seed.slice(-max),
        max,
        last: seed.length ? seed[seed.length - 1] : 0,
        connected: false,

        init() {
            // reflect the REAL websocket state, not just "Echo exists"
            const conn = window.Echo?.connector?.pusher?.connection;
            this.connected = conn?.state === 'connected';
            conn?.bind('state_change', (s) => { this.connected = s.current === 'connected'; });
            window.Echo?.channel('metrics').listen('.tick', (e) => this.push(Number(e.cpu)));
        },

        push(v) {
            this.last = v;
            this.points.push(v);
            if (this.points.length > this.max) this.points.shift();
        },

        coords() {
            const n = this.points.length;
            const w = 300, h = 80, pad = 6;
            return this.points.map((v, i) => {
                const x = n > 1 ? (i / (n - 1)) * w : 0;
                const y = h - pad - (Math.max(0, Math.min(100, v)) / 100) * (h - 2 * pad);
                return `${x.toFixed(1)},${y.toFixed(1)}`;
            });
        },
        get linePoints() { return this.coords().join(' '); },
        get areaPoints() { return `0,80 ${this.coords().join(' ')} 300,80`; },
    }));
});