/**
 * Timeline Module
 * Handles WaveSurfer, audio playback, word pills, and timeline interactions
 */

// ==========================================
// GLOBAL STATE VARIABLES
// ==========================================

// --- WaveSurfer Instance ---
let wavesurfer = null;

// --- Transcription Data ---
let transcriptionData = [];

// --- Timeline Settings ---
let pixelsPerSecond = 100;
let audioDuration = 0;

// --- Current Audio ---
let currentAudioData = "";
let currentAudioFormat = "mp3";
let currentProjectId = null;

// --- Playlist ---
let playlist = [];
let currentTrackIndex = -1;

// --- Drag/Resize State ---
let isDragging = false;
let isResizing = false;
let isScrubbing = false;
let currentPill = null;
let currentIndex = -1;
let selectedPillIndex = -1;
let hasMovedDuringDrag = false;

// ==========================================
// WAVESURFER INITIALIZATION
// ==========================================

/**
 * Initialize WaveSurfer from base64 audio data
 * @param {string} base64Data - Base64 encoded audio
 * @param {string} format - Audio format (mp3, wav, etc.)
 */
function initWaveSurferFromBase64(base64Data, format) {
    if (wavesurfer) wavesurfer.destroy();
    
    const byteArray = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
    const blob = new Blob([byteArray], { type: `audio/${format}` });
    const url = URL.createObjectURL(blob);
    
    wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: '#a5b4fc',
        progressColor: '#818cf8',
        url,
        height: 120,
        normalize: true,
        minPxPerSec: pixelsPerSecond,
        hideScrollbar: true,
        plugins: [
            WaveSurfer.Timeline.create({
                container: '#timeline-ruler',
                height: 25
            })
        ]
    });
    
    wavesurfer.on('decode', () => {
        audioDuration = wavesurfer.getDuration();
        updateTimelineWidth();
        renderPills();
    });
    
    wavesurfer.on('timeupdate', (t) => {
        if (!isScrubbing) {
            document.getElementById('custom-playhead').style.left = `${t * pixelsPerSecond}px`;
            const wrapper = document.getElementById('timelineWrapper');
            if (t * pixelsPerSecond > wrapper.clientWidth / 2) {
                wrapper.scrollLeft = t * pixelsPerSecond - wrapper.clientWidth / 2;
            }
        }
        syncReader(t);
    });
    
    wavesurfer.on('finish', updatePlayBtn);
    initScrubber();
}

// ==========================================
// PLAYHEAD/SCRUBBER FUNCTIONS
// ==========================================

/**
 * Initialize scrubber interactions
 */
function initScrubber() {
    const playhead = document.getElementById('custom-playhead');
    const wrapper = document.getElementById('timelineContent');
    
    playhead.onmousedown = (e) => {
        isScrubbing = true;
        e.preventDefault();
    };
    
    document.onmousemove = (e) => {
        if (!isScrubbing) return;
        const time = Math.max(0, Math.min(
            (e.clientX - wrapper.getBoundingClientRect().left) / pixelsPerSecond,
            audioDuration
        ));
        playhead.style.left = `${time * pixelsPerSecond}px`;
        wavesurfer.setTime(time);
    };
    
    document.onmouseup = () => isScrubbing = false;
    
    wrapper.onclick = (e) => {
        if (!isDragging && !e.target.closest('.word-pill')) {
            const time = (e.clientX - wrapper.getBoundingClientRect().left) / pixelsPerSecond;
            if (time >= 0) wavesurfer.setTime(time);
        }
    };
}

// ==========================================
// TIMELINE WIDTH UPDATE
// ==========================================

/**
 * Update timeline width based on audio duration and zoom
 */
function updateTimelineWidth() {
    if (wavesurfer) {
        const w = wavesurfer.getDuration() * pixelsPerSecond;
        document.getElementById('timelineContent').style.width = w + 'px';
        document.getElementById('waveform').style.width = w + 'px';
    }
}

// ==========================================
// WORD PILL FUNCTIONS
// ==========================================

/**
 * Insert new pill at playhead position
 */
function insertPillAtPlayhead() {
    if (!wavesurfer) return;
    const t = wavesurfer.getCurrentTime();
    transcriptionData.push({ word: "New", start: t, end: t + 0.5 });
    transcriptionData.sort((a, b) => a.start - b.start);
    renderPills();
    runSmartSync();
}

/**
 * Delete currently selected pill
 */
function deleteSelectedPill() {
    if (selectedPillIndex === -1) return;
    transcriptionData.splice(selectedPillIndex, 1);
    selectedPillIndex = -1;
    renderPills();
    runSmartSync();
    document.getElementById('deleteBtn').disabled = true;
}

/**
 * Select a pill by index
 * @param {number} index - Pill index
 */
function selectPill(index) {
    document.querySelectorAll('.word-pill').forEach(p => p.classList.remove('selected'));
    const pills = document.querySelectorAll('.word-pill');
    if (pills[index]) {
        pills[index].classList.add('selected');
        selectedPillIndex = index;
        document.getElementById('deleteBtn').disabled = false;
    }
}

/**
 * Render all word pills on the timeline
 */
function renderPills() {
    const container = document.getElementById('transcription-content');
    container.innerHTML = '';
    
    transcriptionData.forEach((item, index) => {
        const pill = document.createElement('div');
        pill.className = `word-pill ${index === selectedPillIndex ? 'selected' : ''}`;
        pill.textContent = item.word;
        pill.dataset.index = index;
        pill.style.left = `${item.start * pixelsPerSecond}px`;
        pill.style.width = `${(item.end - item.start) * pixelsPerSecond}px`;
        
        // Resize handles
        const lh = document.createElement('div');
        lh.className = 'resize-handle resize-handle-left';
        const rh = document.createElement('div');
        rh.className = 'resize-handle resize-handle-right';
        pill.append(lh, rh);
        
        // Event handlers
        pill.onmousedown = handleDragStart;
        lh.onmousedown = (e) => handleResizeStart(e, 'left');
        rh.onmousedown = (e) => handleResizeStart(e, 'right');
        pill.onclick = (e) => {
            e.stopPropagation();
            selectPill(index);
        };
        pill.ondblclick = (e) => {
            e.stopPropagation();
            const input = document.createElement('input');
            input.value = item.word;
            input.style.cssText = 'all:unset;width:100%;text-align:center;';
            pill.innerHTML = '';
            pill.appendChild(input);
            input.focus();
            input.onblur = () => {
                item.word = input.value;
                renderPills();
                runSmartSync();
            };
            input.onkeydown = (ev) => {
                if (ev.key === 'Enter') input.blur();
            };
        };
        
        container.appendChild(pill);
    });
}

// ==========================================
// PILL DRAG/RESIZE HANDLERS
// ==========================================

/**
 * Handle pill drag start
 * @param {MouseEvent} e - Mouse event
 */
function handleDragStart(e) {
    if (e.target.classList.contains('resize-handle') || e.target.tagName === 'INPUT') return;
    
    isDragging = true;
    hasMovedDuringDrag = false;
    currentPill = e.currentTarget;
    currentIndex = parseInt(currentPill.dataset.index);
    const startX = e.clientX;
    const initialLeft = parseFloat(currentPill.style.left);
    selectPill(currentIndex);
    
    const onMove = (me) => {
        hasMovedDuringDrag = true;
        const newStart = Math.max(0, (initialLeft + (me.clientX - startX)) / pixelsPerSecond);
        const dur = transcriptionData[currentIndex].end - transcriptionData[currentIndex].start;
        transcriptionData[currentIndex].start = newStart;
        transcriptionData[currentIndex].end = newStart + dur;
        currentPill.style.left = `${newStart * pixelsPerSecond}px`;
    };
    
    const onUp = () => {
        isDragging = false;
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
        if (hasMovedDuringDrag) {
            transcriptionData.sort((a, b) => a.start - b.start);
            renderPills();
        }
    };
    
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
}

/**
 * Handle pill resize start
 * @param {MouseEvent} e - Mouse event
 * @param {string} side - 'left' or 'right'
 */
function handleResizeStart(e, side) {
    e.stopPropagation();
    isResizing = true;
    currentPill = e.target.parentElement;
    currentIndex = parseInt(currentPill.dataset.index);
    selectPill(currentIndex);
    
    const onMove = (me) => {
        const time = (me.clientX - document.getElementById('transcription-content').getBoundingClientRect().left) / pixelsPerSecond;
        if (side === 'left') {
            transcriptionData[currentIndex].start = Math.max(0, Math.min(time, transcriptionData[currentIndex].end - 0.1));
        } else {
            transcriptionData[currentIndex].end = Math.max(time, transcriptionData[currentIndex].start + 0.1);
        }
        renderPills();
    };
    
    const onUp = () => {
        isResizing = false;
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
    };
    
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
}

// ==========================================
// PLAYBACK CONTROL FUNCTIONS
// ==========================================

/**
 * Toggle play/pause
 */
function togglePlayPause() {
    if (wavesurfer) wavesurfer.playPause();
    updatePlayBtn();
}

/**
 * Stop audio playback
 */
function stopAudio() {
    if (wavesurfer) wavesurfer.stop();
    updatePlayBtn();
}

/**
 * Update play button state
 */
function updatePlayBtn() {
    const playing = wavesurfer?.isPlaying();
    document.getElementById('playIcon').className = playing 
        ? 'bi bi-pause-fill text-primary' 
        : 'bi bi-play-fill text-primary';
    document.getElementById('playText').textContent = playing ? 'Pause' : 'Play';
}

// ==========================================
// PLAYLIST FUNCTIONS
// ==========================================

/**
 * Update playlist dropdown UI
 */
function updatePlaylistUI() {
    const select = document.getElementById('trackSelect');
    select.innerHTML = playlist.length === 0 
        ? '<option>No tracks generated yet...</option>'
        : playlist.map(t => 
            `<option value="${t.id}">Chapter ${t.chapter} - Section ${t.section}</option>`
        ).join('');
}

/**
 * Load track from playlist by ID
 * @param {string} id - Track ID
 */
function loadTrackFromPlaylist(id) {
    const idx = playlist.findIndex(t => t.id == id);
    if (idx === -1) return;
    
    currentTrackIndex = idx;
    const track = playlist[idx];
    
    document.getElementById('trackSelect').value = track.id;
    document.getElementById('editorSection').classList.remove('d-none');
    document.getElementById('editorSection').scrollIntoView({ behavior: 'smooth' });
    document.getElementById('trackInfo').textContent = `Now Playing: Ch ${track.chapter} / Sec ${track.section}`;

    transcriptionData = track.transcription || [];
    currentAudioData = track.audioData;
    currentAudioFormat = track.audioFormat;
    
    if (track.audioData) {
        initWaveSurferFromBase64(track.audioData, track.audioFormat);
    }
    initReader(track.text);
}

/**
 * Play next track in playlist
 */
function playNextTrack() {
    if (currentTrackIndex < playlist.length - 1) {
        loadTrackFromPlaylist(playlist[currentTrackIndex + 1].id);
    }
}

/**
 * Play previous track in playlist
 */
function playPrevTrack() {
    if (currentTrackIndex > 0) {
        loadTrackFromPlaylist(playlist[currentTrackIndex - 1].id);
    }
}

// ==========================================
// SLIDER EVENT HANDLERS
// ==========================================

/**
 * Initialize slider event handlers
 */
function initSliders() {
    // Zoom slider
    document.getElementById('zoomSlider').oninput = (e) => {
        pixelsPerSecond = parseInt(e.target.value);
        if (wavesurfer) {
            wavesurfer.zoom(pixelsPerSecond);
            updateTimelineWidth();
            renderPills();
        }
    };
    
    // Speed slider
    document.getElementById('speedSlider').oninput = (e) => {
        const rate = parseFloat(e.target.value);
        if (wavesurfer) wavesurfer.setPlaybackRate(rate);
        document.getElementById('speedDisplay').textContent = rate.toFixed(1) + 'x';
    };
}

// ==========================================
// KEYBOARD SHORTCUTS
// ==========================================

/**
 * Initialize keyboard shortcuts
 */
function initKeyboardShortcuts() {
    document.onkeydown = (e) => {
        // Ignore if typing in input/textarea or bulk editor
        if (['INPUT', 'TEXTAREA'].includes(e.target.tagName) || 
            document.getElementById('bulk-editor').contains(e.target)) return;
        
        // Space - Play/Pause
        if (e.code === 'Space') {
            e.preventDefault();
            togglePlayPause();
        }
        
        // Delete - Delete selected pill
        if (e.code === 'Delete') deleteSelectedPill();
    };
}

// ==========================================
// INITIALIZATION
// ==========================================

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', function() {
    initSliders();
    initKeyboardShortcuts();
});