// LightSync frontend — controller UI
// Browser <audio> handles playback; server receives position ticks and sends beat events

import { TimelineCanvas } from './timeline/timeline.js';
import { BlockInspector } from './timeline/inspector.js';
import { DeleteBlockCommand, setCurrentShowId } from './timeline/commands.js';

const WS_URL = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`;

// ── API helpers ──────────────────────────────────────────────────────────────

async function apiPost(path, data) {
    const res = await fetch(path, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
    });
    if (!res.ok && res.status !== 204) throw new Error(`POST ${path}: HTTP ${res.status}`);
    return res.json();
}

async function apiDelete(path) {
    const res = await fetch(path, { method: "DELETE" });
    if (!res.ok && res.status !== 204) throw new Error(`DELETE ${path}: HTTP ${res.status}`);
}

// ── WebSocket ────────────────────────────────────────────────────────────────

class LightSyncClient {
    constructor() { this.ws = null; this._timer = null; }

    connect() {
        this.ws = new WebSocket(WS_URL);

        this.ws.onopen = () => {
            document.getElementById('status-dot')?.classList.add('connected');
            document.getElementById('status-text').textContent = 'CONNECTED';
        };

        this.ws.onclose = () => {
            document.getElementById('status-dot')?.classList.remove('connected');
            document.getElementById('status-text').textContent = 'OFFLINE';
            this._timer = setTimeout(() => this.connect(), 2000);
        };

        this.ws.onerror = () => {
            document.getElementById('status-dot')?.classList.add('error');
        };

        this.ws.onmessage = (e) => {
            const msg = JSON.parse(e.data);
            if (msg.type === 'beat') flashBeat();
            else if (msg.type === 'preview_update') updatePreviewStrip(msg.device_id, msg.animation, msg.color);
        };
    }

    send(msg) {
        if (this.ws?.readyState === WebSocket.OPEN)
            this.ws.send(JSON.stringify(msg));
    }
}

const client = new LightSyncClient();
client.connect();

// ── Beat flash ───────────────────────────────────────────────────────────────

function flashBeat() {
    const dot = document.getElementById('beat-indicator');
    if (!dot) return;
    dot.classList.add('beat-flash');
    setTimeout(() => dot.classList.remove('beat-flash'), 180);
}

// ── Preview strip update ─────────────────────────────────────────────────────

function updatePreviewStrip(deviceId, animation, color) {
    const strip = document.querySelector(`.device-strip[data-device-id="${deviceId}"]`);
    if (!strip) return;
    const colorEl = strip.querySelector('.strip-color');
    const animEl = strip.querySelector('.strip-anim');
    if (animation && color) {
        const [r, g, b] = color;
        colorEl.style.backgroundColor = `rgb(${r},${g},${b})`;
        animEl.textContent = animation.toUpperCase().replace('_', ' ');
        strip.classList.add('active');
    } else {
        colorEl.style.backgroundColor = '';  // revert to CSS default (--text-dim)
        animEl.textContent = '\u2014';  // em dash
        strip.classList.remove('active');
    }
}

// ── 10Hz position tick loop ──────────────────────────────────────────────────

let _tickInterval = null;

function startTicks() {
    if (_tickInterval) return;
    _tickInterval = setInterval(() => {
        const audio = document.getElementById('player');
        if (audio && !audio.paused && !audio.ended)
            client.send({ type: 'tick', position: audio.currentTime });
    }, 100);
}

function stopTicks() {
    clearInterval(_tickInterval);
    _tickInterval = null;
}

// ── Audio element ────────────────────────────────────────────────────────────

function fmt(s) {
    if (!isFinite(s)) return '0:00';
    const m = Math.floor(s / 60);
    const sec = Math.floor(s % 60).toString().padStart(2, '0');
    return `${m}:${sec}`;
}

function wireAudio() {
    const audio = document.getElementById('player');
    const btn   = document.getElementById('btn-play');
    const seek  = document.getElementById('seek-bar');
    const cur   = document.getElementById('time-current');
    const dur   = document.getElementById('time-duration');
    if (!audio) return;

    // Play/Pause button
    btn?.addEventListener('click', () => {
        if (audio.paused) audio.play();
        else audio.pause();
    });

    audio.addEventListener('play',  () => { btn.textContent = '⏸'; startTicks(); client.send({ type: 'play', position: audio.currentTime }); });
    audio.addEventListener('pause', () => { btn.textContent = '▶'; stopTicks(); client.send({ type: 'pause', position: audio.currentTime }); });
    audio.addEventListener('ended', () => { btn.textContent = '▶'; stopTicks(); seek.value = 0; });

    // Time display + seek bar sync
    audio.addEventListener('timeupdate', () => {
        if (!seek._dragging) {
            const pct = audio.duration > 0 ? (audio.currentTime / audio.duration) * 100 : 0;
            seek.value = pct;
        }
        cur.textContent = fmt(audio.currentTime);
        client.send({ type: 'tick', position: audio.currentTime });
    });

    audio.addEventListener('loadedmetadata', () => {
        dur.textContent = fmt(audio.duration);
        document.getElementById('show-name').textContent =
            audio.src.split('/').pop() || '— playing —';
    });

    // Seek bar drag
    seek.addEventListener('mousedown', () => { seek._dragging = true; });
    seek.addEventListener('input', () => {
        if (audio.duration > 0)
            cur.textContent = fmt((seek.value / 100) * audio.duration);
    });
    seek.addEventListener('mouseup', () => {
        seek._dragging = false;
        if (audio.duration > 0) {
            audio.currentTime = (seek.value / 100) * audio.duration;
            client.send({ type: 'seek', position: audio.currentTime });
            // Clear preview strips on seek (strips re-light when next cue fires)
            document.querySelectorAll('.device-strip').forEach(s => {
                s.classList.remove('active');
                s.querySelector('.strip-color').style.backgroundColor = '';
                s.querySelector('.strip-anim').textContent = '\u2014';
            });
        }
    });
}

// ── Keyboard shortcuts ──────────────────────────────────────────────────────

function wireKeyboard() {
    const audio = document.getElementById('player');

    document.addEventListener('keydown', (e) => {
        // Skip shortcuts when typing in form elements
        const tag = document.activeElement?.tagName?.toLowerCase();
        if (['input', 'select', 'textarea'].includes(tag)) return;
        // Also skip Space on focused buttons to prevent double-toggle (Pitfall 6)
        if (e.code === 'Space' && tag === 'button') return;

        if (e.code === 'Space') {
            e.preventDefault();
            if (!audio) return;
            if (audio.paused) {
                audio.play();
                client.send({ type: 'play', position: audio.currentTime });
            } else {
                audio.pause();
                client.send({ type: 'pause', position: audio.currentTime });
            }
        } else if (e.code === 'ArrowLeft') {
            e.preventDefault();
            if (!audio) return;
            audio.currentTime = Math.max(0, audio.currentTime - 5);
            client.send({ type: 'seek', position: audio.currentTime });
            // Clear preview strips on seek
            document.querySelectorAll('.device-strip').forEach(s => {
                s.classList.remove('active');
                const colorEl = s.querySelector('.strip-color');
                if (colorEl) colorEl.style.backgroundColor = '';
                const animEl = s.querySelector('.strip-anim');
                if (animEl) animEl.textContent = '\u2014';
            });
        } else if (e.code === 'ArrowRight') {
            e.preventDefault();
            if (!audio) return;
            audio.currentTime = Math.min(audio.duration || 0, audio.currentTime + 5);
            client.send({ type: 'seek', position: audio.currentTime });
            // Clear preview strips on seek
            document.querySelectorAll('.device-strip').forEach(s => {
                s.classList.remove('active');
                const colorEl = s.querySelector('.strip-color');
                if (colorEl) colorEl.style.backgroundColor = '';
                const animEl = s.querySelector('.strip-anim');
                if (animEl) animEl.textContent = '\u2014';
            });
        } else if (e.ctrlKey && !e.shiftKey && e.code === 'KeyZ') {
            e.preventDefault();
            timeline?.history.undo();
        } else if ((e.ctrlKey && e.shiftKey && e.code === 'KeyZ') || (e.ctrlKey && e.code === 'KeyY')) {
            e.preventDefault();
            timeline?.history.redo();
        } else if (e.ctrlKey && e.code === 'KeyS') {
            e.preventDefault();  // Prevent browser Save dialog (Pitfall 7)
            if (timeline?.showId) {
                fetch(`/api/shows/${timeline.showId}`)
                    .then(r => r.json())
                    .then(show => fetch('/api/shows', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(show),
                    }))
                    .then(() => console.log('[save] show saved via Ctrl+S'))
                    .catch(e => console.warn('[save]', e));
            }
        }
    });
}

// ── File list ────────────────────────────────────────────────────────────────

async function refreshFiles(selectPath) {
    const sel = document.getElementById('audio-select');
    if (!sel) return;
    try {
        const { files } = await (await fetch('/api/audio/files')).json();
        const prev = selectPath ?? sel.value;
        sel.innerHTML = '<option value="">— select file —</option>';
        files.forEach(name => {
            const opt = document.createElement('option');
            opt.value = `/app/shows/${name}`;
            opt.textContent = name;
            if (opt.value === prev) opt.selected = true;
            sel.appendChild(opt);
        });
    } catch (e) { console.error('[files]', e); }
}

refreshFiles();

// ── Upload ───────────────────────────────────────────────────────────────────

document.getElementById('audio-upload')?.addEventListener('change', async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const form = new FormData();
    form.append('file', file);
    try {
        const res = await fetch('/api/audio/upload', { method: 'POST', body: form });
        if (!res.ok) { console.error('[upload]', await res.json()); return; }
        const { path } = await res.json();
        await refreshFiles(path);
        // Auto-select and load
        const audio = document.getElementById('player');
        if (audio) { audio.src = `/shows/${file.name}`; audio.load(); }
    } catch (e) { console.error('[upload]', e); }
    e.target.value = '';
});

// ── YouTube fetch ────────────────────────────────────────────────────────────

async function fetchWithProgress(url, body, onProgress, onDone, onError) {
    const res = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
    });
    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let buf = '';
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += decoder.decode(value, { stream: true });
        const lines = buf.split('\n\n');
        buf = lines.pop();
        for (const chunk of lines) {
            if (chunk.startsWith('data: ')) {
                const msg = JSON.parse(chunk.slice(6));
                if (msg.type === 'progress') onProgress(msg.pct);
                if (msg.type === 'done') onDone(msg);
                if (msg.type === 'error') onError(msg.msg);
            }
        }
    }
}

function renderProgressBar(pct, width = 20) {
    const filled = Math.round((pct / 100) * width);
    const empty = width - filled;
    return `DOWNLOADING ${'█'.repeat(filled)}${'░'.repeat(empty)} ${Math.round(pct)}%`;
}

document.getElementById('btn-fetch')?.addEventListener('click', async () => {
    const urlInput = document.getElementById('yt-url');
    const btn = document.getElementById('btn-fetch');
    const progress = document.getElementById('yt-progress');
    const url = urlInput?.value.trim();
    if (!url) return;

    // D-02: Disable input during download
    urlInput.disabled = true;
    btn.disabled = true;
    btn.textContent = '...';
    progress.style.display = 'inline';
    progress.textContent = 'DOWNLOADING ░░░░░░░░░░░░░░░░░░░░ 0%';

    try {
        await fetchWithProgress('/api/audio/fetch', { url },
            (pct) => {
                progress.textContent = renderProgressBar(pct);
            },
            (msg) => {
                // D-01: After download, load identically to local upload
                progress.textContent = 'COMPLETE';
                const audio = document.getElementById('player');
                if (audio && msg.filename) {
                    audio.src = `/shows/${msg.filename}`;
                    audio.load();
                }
                refreshFiles(msg.path);
                setTimeout(() => { progress.style.display = 'none'; }, 2000);
            },
            (errMsg) => {
                progress.textContent = `ERROR: ${errMsg}`;
                progress.style.color = '#ff4444';
                setTimeout(() => {
                    progress.style.display = 'none';
                    progress.style.color = '';
                }, 5000);
            }
        );
    } catch (e) {
        progress.textContent = `ERROR: ${e.message}`;
        setTimeout(() => { progress.style.display = 'none'; }, 5000);
    } finally {
        urlInput.disabled = false;
        urlInput.value = '';
        btn.disabled = false;
        btn.textContent = 'FETCH';
    }
});

// ── Load selected ────────────────────────────────────────────────────────────

document.getElementById('btn-load')?.addEventListener('click', async () => {
    const sel  = document.getElementById('audio-select');
    const path = sel?.value;
    if (!path) return;
    const filename = path.split('/').pop();
    const audio = document.getElementById('player');
    if (audio) { audio.src = `/shows/${filename}`; audio.load(); }
    // Trigger beat analysis in background
    fetch(`/api/audio/beats?path=${encodeURIComponent(path)}`).catch(() => {});
});

// ── Devices ──────────────────────────────────────────────────────────────────

async function loadDevices() {
    const list = document.getElementById('device-list');
    try {
        const devices = await (await fetch('/api/devices')).json();
        if (!devices.length) {
            list.innerHTML = '<span class="text-dim">no devices</span>';
            return;
        }
        list.innerHTML = devices.map(d => `
            <div class="device-row">
                <div class="device-row-info">
                    <span>${d.name}</span>
                    <span class="text-dim" style="font-size:11px">${d.ip}:${d.port} &middot; ${d.led_count} LEDs</span>
                </div>
                <button class="device-remove" data-id="${d.id}" title="Remove">&#215;</button>
            </div>`).join('');
        list.querySelectorAll('.device-remove').forEach(btn => {
            btn.addEventListener('click', async () => {
                await apiDelete(`/api/devices/${btn.dataset.id}`);
                await loadDevices();
            });
        });
    } catch (e) {
        list.innerHTML = '<span class="text-dim">error loading devices</span>';
    }
}

loadDevices();

document.getElementById('add-device-form')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = {
        name: form.elements['name'].value.trim(),
        strip_type: form.strip_type.value,
        led_count: parseInt(form.led_count.value, 10),
        ip: form.ip.value.trim(),
        port: parseInt(form.port.value, 10),
    };
    try {
        await apiPost('/api/devices', data);
        form.reset();
        await loadDevices();
    } catch (e) { console.error('[device]', e); }
});

// ── Init ─────────────────────────────────────────────────────────────────────

wireAudio();
wireKeyboard();  // keyboard shortcuts (Phase 5)
document.getElementById('yt-url').disabled = false;

// ── Preview strip builder ────────────────────────────────────────────────────

function buildPreviewStrips(devices) {
    const panel = document.getElementById('live-preview');
    if (!panel) return;
    panel.innerHTML = devices.map(d => `
        <div class="device-strip" data-device-id="${d.id}">
            <span class="strip-label">${d.name}</span>
            <div class="strip-color"></div>
            <span class="strip-anim">\u2014</span>
        </div>
    `).join('');
}

// ── Timeline ─────────────────────────────────────────────────────────────────

let timeline = null;

function initTimeline() {
    const canvas = document.getElementById('timeline-canvas');
    const audio = document.getElementById('player');
    if (!canvas || !audio) return;

    timeline = new TimelineCanvas(canvas, audio);

    // Inspector
    const inspectorEl = document.getElementById('block-inspector');
    const inspector = new BlockInspector(inspectorEl, timeline.history);
    inspector.tracks = timeline.tracks;

    // Wire timeline selection → inspector
    timeline._onSelectBlock = (block) => {
        inspector.show(block);
    };

    // Wire inspector delete → timeline
    inspector._onDelete = (block) => {
        const cmd = new DeleteBlockCommand(timeline.tracks, block);
        timeline.history.execute(cmd);
        timeline.selectedBlock = null;
        inspector.hide();
    };

    // Load device tracks
    fetch('/api/devices').then(r => r.json()).then(devices => {
        timeline.loadTracks(devices);
        inspector.tracks = timeline.tracks;  // keep reference in sync
        buildPreviewStrips(devices);  // populate preview strips
    }).catch(e => console.warn('[timeline]', e));

    // When audio loads, fetch waveform + beats
    audio.addEventListener('loadedmetadata', () => {
        const src = audio.src;
        const filename = src.split('/').pop();
        const path = `/app/shows/${filename}`;
        timeline.audioDuration = audio.duration;
        timeline.loadWaveform(path);
        // Load structural segments for overlay
        timeline.loadSegments(path);
        // Enable AI Sync generate button
        const genBtn = document.getElementById('btn-ai-generate');
        if (genBtn) genBtn.disabled = false;
        const infoEl = document.getElementById('ai-sync-info');
        if (infoEl) {
            const seg = timeline.segmentOverlay?.getSelected();
            infoEl.textContent = seg ? `SECTION: ${seg.label}` : 'FULL SHOW';
        }
        // Load beats and update BPM display when analysis completes
        timeline.loadBeats(path).then(() => {
            if (timeline.beatGrid.tempoBpm) {
                const label = document.getElementById('beat-label');
                if (label) label.textContent = `${Math.round(timeline.beatGrid.tempoBpm)} BPM`;
            }
        });
    });

    // Zoom slider
    document.getElementById('zoom-slider')?.addEventListener('input', (e) => {
        timeline.pixelsPerSecond = parseFloat(e.target.value);
    });

    // Beat offset
    document.getElementById('beat-offset')?.addEventListener('input', (e) => {
        timeline.calibrationOffset = parseFloat(e.target.value) || 0.03;
    });

    // Snap toggle
    document.getElementById('btn-snap')?.addEventListener('click', (e) => {
        timeline.snapEnabled = !timeline.snapEnabled;
        e.target.classList.toggle('active', timeline.snapEnabled);
    });

    // Populate animation palette in sidebar
    const palette = document.getElementById('animation-palette');
    if (palette) {
        const anims = ['chase', 'pulse', 'rainbow', 'strobe', 'color_wipe', 'fire', 'solid'];
        palette.innerHTML = anims.map(name => `
            <button class="anim-tile" data-anim="${name}" draggable="true">
                <span class="anim-cursor">&gt;</span>
                <span class="anim-name">${name.toUpperCase().replace('_', ' ')}</span>
            </button>
        `).join('');
    }

    // Drag from palette to canvas
    const canvasEl = document.getElementById('timeline-canvas');

    palette?.addEventListener('dragstart', (e) => {
        const tile = e.target.closest('.anim-tile');
        if (!tile) return;
        e.dataTransfer.setData('text/plain', tile.dataset.anim);
        e.dataTransfer.effectAllowed = 'copy';
    });

    canvasEl?.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
        // Show ghost preview for current drag position
        const rect = canvasEl.getBoundingClientRect();
        const mx = e.clientX - rect.left;
        const my = e.clientY - rect.top;
        const trackIdx = timeline.yToTrackIndex(my);
        const time = timeline.xToTime(mx);
        timeline._dragState = {
            ghost: true,
            trackIdx: trackIdx,
            time: Math.max(0, time),
            duration: 4.0
        };
    });

    canvasEl?.addEventListener('dragleave', () => {
        timeline._dragState = null;
    });

    canvasEl?.addEventListener('drop', (e) => {
        e.preventDefault();
        const animType = e.dataTransfer.getData('text/plain');
        if (!animType) return;
        const rect = canvasEl.getBoundingClientRect();
        const mx = e.clientX - rect.left;
        const my = e.clientY - rect.top;
        timeline.handleDrop(animType, mx, my);
        timeline._dragState = null;
    });

    timeline.startRenderLoop();

    // Update AI Sync info when segment selection changes
    let _lastSegIdx = -1;
    setInterval(() => {
        if (!timeline?.segmentOverlay) return;
        const idx = timeline.segmentOverlay.selectedIndex;
        if (idx !== _lastSegIdx) {
            _lastSegIdx = idx;
            const infoEl = document.getElementById('ai-sync-info');
            if (infoEl) {
                const seg = timeline.segmentOverlay.getSelected();
                infoEl.textContent = seg ? `SECTION: ${seg.label}` : 'FULL SHOW';
            }
        }
    }, 200);
}

initTimeline();

// ── Show Selector ───────────────────────────────────────────────────────────

async function refreshShows() {
    const sel = document.getElementById('show-select');
    if (!sel) return;
    try {
        const shows = await (await fetch('/api/shows')).json();
        sel.innerHTML = shows.length
            ? '<option value="">\u2014 select show \u2014</option>'
            : '<option value="">\u2014 no shows \u2014</option>';
        shows.forEach(s => {
            const opt = document.createElement('option');
            opt.value = s.id;
            opt.textContent = s.name;
            sel.appendChild(opt);
        });
    } catch (e) { console.error('[shows]', e); }
}

refreshShows();

document.getElementById('btn-load-show')?.addEventListener('click', async () => {
    const sel = document.getElementById('show-select');
    const showId = sel?.value;
    if (!showId) return;

    const btn = document.getElementById('btn-load-show');
    btn.textContent = '...';

    try {
        const show = await (await fetch(`/api/shows/${showId}`)).json();

        // Populate timeline tracks with saved cues
        if (timeline && show.tracks) {
            for (const showTrack of show.tracks) {
                const existing = timeline.tracks.find(
                    t => String(t.device_id) === String(showTrack.device_id)
                );
                if (existing) {
                    existing.cues = (showTrack.cues || []).map(c => ({...c}));
                } else {
                    console.warn('[show] track for unknown device', showTrack.device_id);
                }
            }
        }

        // Set current show ID for auto-save
        if (timeline) timeline.showId = showId;
        setCurrentShowId(showId);

        // Load audio if show has audio path
        if (show.audio?.path) {
            const filename = show.audio.path.split('/').pop();
            const audio = document.getElementById('player');
            if (audio && filename) {
                audio.src = `/shows/${filename}`;
                audio.load();
            }
        }

        // Tell server to load show cue list for scheduling
        client.send({ type: 'load', show_id: showId, path: show.audio?.path || '' });

        // Show preview panel
        const preview = document.getElementById('live-preview');
        if (preview) preview.style.display = 'flex';

        console.log('[show] loaded', show.name, 'with', show.tracks?.length || 0, 'tracks');
    } catch (e) {
        console.error('[show] failed to load', showId, e);
    } finally {
        btn.textContent = 'LOAD';
    }
});

// ── AI Sync panel ───────────────────────────────────────────────────────────

document.getElementById('btn-ai-sync-open')?.addEventListener('click', () => {
    const panel = document.getElementById('ai-sync-panel');
    if (!panel) return;
    const visible = panel.style.display !== 'none';
    panel.style.display = visible ? 'none' : 'block';
});

fetch('/api/sync/llm-available')
    .then(r => r.json())
    .then(data => {
        const checkbox = document.getElementById('ai-use-llm');
        const label = document.getElementById('ai-llm-label');
        const container = checkbox?.closest('.ai-sync-llm-toggle');
        if (data.available) {
            checkbox.disabled = false;
            if (container) container.classList.remove('disabled');
        } else {
            checkbox.disabled = true;
            if (label) label.title = 'ANTHROPIC_API_KEY not configured';
            if (container) container.classList.add('disabled');
        }
    })
    .catch(() => {});

document.getElementById('btn-ai-generate')?.addEventListener('click', async () => {
    if (!timeline) return;

    const audio = document.getElementById('player');
    if (!audio?.src) return;

    // D-07: Confirm replacement if existing blocks
    const hasBlocks = timeline.tracks.some(t => t.cues.length > 0);
    if (hasBlocks) {
        if (!confirm('Replace all existing blocks?')) return;
    }

    const btn = document.getElementById('btn-ai-generate');
    const infoEl = document.getElementById('ai-sync-info');
    btn.disabled = true;
    btn.textContent = 'GENERATING...';
    if (infoEl) infoEl.textContent = 'ANALYZING...';

    try {
        const filename = audio.src.split('/').pop();
        const path = `/app/shows/${filename}`;

        // D-11: If a section is selected, only fill that range
        const selectedSeg = timeline.segmentOverlay?.getSelected();
        const sectionRange = selectedSeg ? [selectedSeg.start, selectedSeg.end] : null;

        // Collect device IDs from timeline tracks
        const deviceIds = timeline.tracks.map(t => t.device_id);

        const useLlm = document.getElementById('ai-use-llm')?.checked || false;

        const res = await fetch('/api/sync/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                path: path,
                device_ids: deviceIds,
                use_llm: useLlm,
                section_range: sectionRange,
            }),
        });

        if (!res.ok) {
            const err = await res.json();
            throw new Error(err.detail || `HTTP ${res.status}`);
        }

        const data = await res.json();

        // Clear existing blocks (or section range only)
        if (sectionRange) {
            // Clear only blocks in the section range
            for (const track of timeline.tracks) {
                track.cues = track.cues.filter(c =>
                    c.timestamp + (c.duration || 0) < sectionRange[0] ||
                    c.timestamp >= sectionRange[1]
                );
            }
        } else {
            // Clear all blocks
            for (const track of timeline.tracks) {
                track.cues = [];
            }
        }

        // Place generated blocks onto tracks
        for (const block of data.blocks) {
            const track = timeline.tracks.find(t => String(t.device_id) === String(block.device_id));
            if (track) {
                track.cues.push({
                    id: block.id,
                    timestamp: block.timestamp,
                    duration: block.duration,
                    animation: block.animation,
                    params: block.params,
                    mode: 'animation',
                });
            }
        }

        if (infoEl) infoEl.textContent = `GENERATED ${data.count} BLOCKS (${data.mode.toUpperCase()})`;
        console.log(`[ai-sync] Generated ${data.count} blocks via ${data.mode}`);

    } catch (e) {
        console.error('[ai-sync]', e);
        if (infoEl) infoEl.textContent = `ERROR: ${e.message}`;
    } finally {
        btn.disabled = false;
        btn.textContent = 'GENERATE';
    }
});