import './echo';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const prefersReducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Resolve "token:name" / "token:name/0.12" strings in a chart config to real
// colours pulled from the CSS design tokens (keeps charts on-palette, R3).
function tokenColor(spec, css) {
    const [name, alpha] = spec.split('/');
    const value = css.getPropertyValue('--' + name.trim()).trim();
    if (!value) return spec;
    if (alpha && value.startsWith('#')) {
        let hex = value.slice(1);
        if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
        const r = parseInt(hex.slice(0, 2), 16);
        const g = parseInt(hex.slice(2, 4), 16);
        const b = parseInt(hex.slice(4, 6), 16);
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    return value;
}

function resolveTokens(node, css) {
    if (typeof node === 'string') return node.startsWith('token:') ? tokenColor(node.slice(6), css) : node;
    if (Array.isArray(node)) return node.map((n) => resolveTokens(n, css));
    if (node && typeof node === 'object') {
        const out = {};
        for (const key of Object.keys(node)) out[key] = resolveTokens(node[key], css);
        return out;
    }
    return node;
}

// Turn any resolved colour (#hex, rgb(), rgba()) into an rgba() with the given alpha.
function toRgba(color, alpha) {
    if (typeof color !== 'string') return color;
    if (color.startsWith('#')) {
        let hex = color.slice(1);
        if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
        const r = parseInt(hex.slice(0, 2), 16);
        const g = parseInt(hex.slice(2, 4), 16);
        const b = parseInt(hex.slice(4, 6), 16);
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    const m = color.match(/rgba?\(([^)]+)\)/);
    if (m) {
        const [r, g, b] = m[1].split(',').map((n) => n.trim());
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    return color;
}

// Every filled line dataset gets a vertical gradient from its line colour to
// transparent — the "colour fades to nothing under the line" look (R3/token-driven).
function applyLineGradients(cfg) {
    const isLine = (ds) => (ds.type || cfg.type) === 'line';
    for (const ds of cfg.data?.datasets ?? []) {
        if (!isLine(ds) || !ds.fill) continue;
        const base = Array.isArray(ds.borderColor) ? ds.borderColor[0] : ds.borderColor;
        if (!base) continue;
        ds.backgroundColor = (ctx) => {
            const { chart } = ctx;
            const area = chart.chartArea;
            if (!area) return toRgba(base, 0.18); // first paint before layout
            const g = chart.ctx.createLinearGradient(0, area.top, 0, area.bottom);
            g.addColorStop(0, toRgba(base, 0.32));
            g.addColorStop(1, toRgba(base, 0));
            return g;
        };
    }
}

// A page that was open across a deploy carries a Livewire snapshot and a CSRF
// token the new code no longer accepts. The user sees "419 Page Expired" and a
// dead interface; the session itself is still fine, so a reload fixes it.
//
// Hooked at the network layer rather than through Livewire's request hook: the
// hook's failure callback is not invoked for this case in every version, and a
// silent no-op here is exactly the bug we are trying to remove.
const originalFetch = window.fetch.bind(window);
window.fetch = async (...args) => {
    const response = await originalFetch(...args);

    if (response.status === 419) {
        const url = typeof args[0] === 'string' ? args[0] : args[0]?.url ?? '';
        if (url.includes('/livewire/')) {
            window.location.reload();
        }
    }

    return response;
};

// Minutes:seconds until `targetIso`, floored at zero. Shared by the
// maintenance overlay and the settings card's own countdowns — the one bit of
// arithmetic behind both, kept in one place so a rounding fix does not need
// to be made twice. Never assembles a sentence, only the digits: the words
// around it are always server-translated.
function minutesSeconds(targetIso, nowMs) {
    if (!targetIso) return '0:00';

    const remaining = Math.max(0, Math.round((new Date(targetIso).getTime() - nowMs) / 1000));
    const m = Math.floor(remaining / 60);
    const s = remaining % 60;

    return `${m}:${String(s).padStart(2, '0')}`;
}

document.addEventListener('alpine:init', () => {
    // ── Watching a deployment that restarts the watcher ──────────────────
    //
    // wire:poll cannot see an update through to the end, because the update
    // restarts the containers serving the poll. Mid-run every request fails;
    // afterwards a NEW build is being questioned by the OLD page's JavaScript.
    // The card therefore sat on "running" until somebody reloaded the page by
    // hand, which is how it was reported.
    //
    // This asks a plain JSON endpoint instead — no Livewire, no component
    // state, no assets — and, crucially, treats a failed request as the
    // restart rather than as an error worth giving up over.
    window.Alpine.data('updateWatcher', ({
        url, commit, running, step = null, nextCheckAt = null, runningSince = null, log = null,
    }) => ({
        // The build this page was rendered from. When the server stops
        // agreeing, the page is stale by definition and must be replaced —
        // this is the only signal that survives the restart, since the run has
        // already ended by the time we can ask again.
        renderedCommit: commit,
        wasRunning: running,
        // Already translated server-side ("Schritt: …", "Läuft seit …") — the
        // client only ever displays these, never assembles them, so German
        // text stays out of JavaScript entirely.
        step,
        runningSince,
        log,
        // Not text: the instant the agent will next look, for the live
        // countdown below to count down to.
        nextCheckAt,
        now: Date.now(),
        timer: null,
        clock: null,

        init() {
            this.schedule();
            // A second hand for the countdown, independent of how often
            // `check()` actually polls — otherwise "Startet in" would jump in
            // three-second steps instead of reading as live.
            this.clock = setInterval(() => { this.now = Date.now(); }, 1000);
            // Nothing to watch while the tab is hidden; pick straight back up
            // rather than waiting out a whole interval on return.
            document.addEventListener('visibilitychange', () => {
                if (!document.hidden) this.check();
            });
        },

        // Queued: the agent has not picked the request up yet, so there is no
        // step to show. Once it has, `step` arrives and this stops mattering.
        get countdownLabel() {
            return minutesSeconds(this.nextCheckAt, this.now);
        },

        schedule() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => this.check(), this.wasRunning ? 3000 : 20000);
        },

        async check() {
            try {
                const response = await fetch(url, { headers: { Accept: 'application/json' }, cache: 'no-store' });

                // A redirect to the login page answers 200 with HTML. Reload
                // rather than parse it: the session is what needs attention.
                if (!response.ok || !response.headers.get('content-type')?.includes('json')) {
                    throw new Error('not ready');
                }

                const state = await response.json();

                if (state.commit && this.renderedCommit && state.commit !== this.renderedCommit) {
                    window.location.reload();

                    return;
                }

                // The run ended without the build changing — a check that found
                // nothing, or a failure. Either way the card has something new
                // to say.
                if (this.wasRunning && !state.running) {
                    window.location.reload();

                    return;
                }

                this.wasRunning = state.running;
                this.step = state.step ?? null;
                this.runningSince = state.running_since ?? null;
                this.log = state.log ?? null;
                this.nextCheckAt = state.next_check_at ?? null;
            } catch {
                // Expected while the containers are down. Keep asking: this is
                // the middle of the very event being watched, not a fault.
                this.wasRunning = true;
            }

            this.schedule();
        },

        destroy() {
            clearTimeout(this.timer);
            clearInterval(this.clock);
        },
    }));

    // ── A live "starts in" countdown ──────────────────────────────────────
    // Used on the settings card wherever it is waiting on the agent's next
    // tick — a queued check or a queued run. Self-contained rather than
    // reading off updateWatcher above: this lives inside a Livewire-rendered
    // card, and a poll-driven re-render is not guaranteed to preserve a
    // nested component's state the way a plain re-render of this one is.
    window.Alpine.data('countdown', (target) => ({
        target,
        now: Date.now(),
        timer: null,

        init() {
            this.timer = setInterval(() => { this.now = Date.now(); }, 1000);
        },

        get label() {
            return minutesSeconds(this.target, this.now);
        },

        destroy() {
            clearInterval(this.timer);
        },
    }));

    // ── VPN config: copy / download ──────────────────────────────────────
    // navigator.clipboard only exists in a secure context, so over plain http
    // (the panel reached by IP) the copy button silently did nothing. Falls
    // back to the legacy selection copy, and says so when even that fails.
    window.Alpine.data('vpnConfigActions', (filename) => ({
        copied: false,
        failed: false,
        text() {
            return this.$refs.config.textContent;
        },
        async copy() {
            try {
                if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(this.text());
                } else {
                    const area = document.createElement('textarea');
                    area.value = this.text();
                    area.setAttribute('readonly', '');
                    area.style.position = 'fixed';
                    area.style.opacity = '0';
                    document.body.appendChild(area);
                    area.select();
                    const ok = document.execCommand('copy');
                    document.body.removeChild(area);
                    if (!ok) throw new Error('copy rejected');
                }
                this.failed = false;
                this.copied = true;
                setTimeout(() => (this.copied = false), 2000);
            } catch (e) {
                this.copied = false;
                this.failed = true;
                setTimeout(() => (this.failed = false), 6000);
            }
        },
        download() {
            // Built in the browser from what is already on the page: the private
            // key never has to travel a second time, and no route has to exist.
            const url = URL.createObjectURL(new Blob([this.text()], { type: 'text/plain' }));
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            setTimeout(() => URL.revokeObjectURL(url), 1000);
        },
    }));

    // ── Segmented OTP input ──────────────────────────────────────────────
    window.Alpine.data('otpInput', ({ length = 6 } = {}) => ({
        length,
        digits: Array(length).fill(''),
        get value() {
            return this.digits.join('');
        },
        cells() {
            return this.$root.querySelectorAll('input[inputmode="numeric"]');
        },
        focusCell(i) {
            const cell = this.cells()[i];
            if (cell) cell.focus();
        },
        onInput(i, e) {
            const digit = e.target.value.replace(/\D/g, '').slice(-1);
            this.digits[i] = digit;
            if (digit && i < this.length - 1) this.focusCell(i + 1);
            this.maybeSubmit();
        },
        onBackspace(i) {
            if (!this.digits[i] && i > 0) this.focusCell(i - 1);
        },
        onPaste(e) {
            const text = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, this.length);
            for (let i = 0; i < this.length; i++) this.digits[i] = text[i] || '';
            this.focusCell(Math.min(text.length, this.length - 1));
            this.maybeSubmit();
        },
        maybeSubmit() {
            if (this.value.length === this.length) {
                this.$nextTick(() => this.$root.closest('form')?.requestSubmit());
            }
        },
    }));

    // ── Chart.js island ──────────────────────────────────────────────────
    window.Alpine.data('chart', (config) => ({
        instance: null,
        init() {
            // Read tokens from this element so charts honour a scoped theme
            // (e.g. .theme-admin dark tokens), not just :root.
            const css = getComputedStyle(this.$el);
            Chart.defaults.font.family = css.getPropertyValue('--font-sans').trim() || 'sans-serif';
            Chart.defaults.color = css.getPropertyValue('--text-muted').trim() || '#667085';
            Chart.defaults.borderColor = css.getPropertyValue('--border').trim() || '#e4e7ec';

            const cfg = resolveTokens(config, css);
            applyLineGradients(cfg);
            cfg.options = {
                responsive: true,
                maintainAspectRatio: false,
                animation: prefersReducedMotion() ? false : cfg.options?.animation,
                ...cfg.options,
            };
            this.instance = new Chart(this.$refs.canvas, cfg);
        },
        destroy() {
            this.instance?.destroy();
        },
    }));
});