import { app } from '../../../scripts/app.js';
import { t } from './interface_settings.js';
import { stopGalleryAudio } from './ui_audio_gallery.js';
import { openAudioUploaderModal } from './ui_audio_uploader.js';

/**
 * Audio & Voice Studio Workspace
 * Professional, dark-themed DAW/Studio aesthetic for character voice presets.
 */

let globalAudioPlayer = null;
let currentPlayingBtn = null;
let currentPlayingBar = null;

const SVG = {
    PLAY: `<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
    PAUSE: `<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>`,
    MIC: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>`,
    COPY: `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
    CHECK: `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
    SEARCH: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`
};

export function stopAudioStudioPlayback() {
    if (globalAudioPlayer) {
        globalAudioPlayer.pause();
        globalAudioPlayer.currentTime = 0;
        globalAudioPlayer = null;
    }
    if (currentPlayingBtn) {
        currentPlayingBtn.innerHTML = SVG.PLAY;
        currentPlayingBtn.classList.remove('is-playing');
        currentPlayingBtn = null;
    }
    if (currentPlayingBar) {
        currentPlayingBar.style.display = 'none';
        currentPlayingBar = null;
    }
}

function playAudio(url, playBtn, eqBars) {
    if (currentPlayingBtn === playBtn) {
        stopAudioStudioPlayback();
        return;
    }
    stopAudioStudioPlayback();
    if (typeof stopGalleryAudio === 'function') stopGalleryAudio();

    const audio = new Audio(url);
    globalAudioPlayer = audio;
    currentPlayingBtn = playBtn;
    currentPlayingBar = eqBars;

    playBtn.innerHTML = SVG.PAUSE;
    playBtn.classList.add('is-playing');
    if (eqBars) eqBars.style.display = 'inline-flex';

    audio.onended = () => stopAudioStudioPlayback();
    audio.onerror = () => stopAudioStudioPlayback();
    audio.play().catch(() => stopAudioStudioPlayback());
}

function copySyntax(tag, btn) {
    navigator.clipboard.writeText(tag).then(() => {
        const originalHtml = btn.innerHTML;
        btn.innerHTML = `${SVG.CHECK} <span>${t('audioCopied')}</span>`;
        btn.style.color = '#34d399';
        btn.style.borderColor = 'rgba(52, 211, 153, 0.4)';
        setTimeout(() => {
            btn.innerHTML = originalHtml;
            btn.style.color = '';
            btn.style.borderColor = '';
        }, 1500);
    });
}

function getEmotionStyle(emotion) {
    const raw = String(emotion || '').toLowerCase();
    if (raw.includes('happy') || raw.includes('joy')) {
        return { color: '#fbbf24', bg: 'rgba(245, 158, 11, 0.12)', border: 'rgba(245, 158, 11, 0.3)' };
    }
    if (raw.includes('sad') || raw.includes('cry')) {
        return { color: '#60a5fa', bg: 'rgba(59, 130, 246, 0.12)', border: 'rgba(59, 130, 246, 0.3)' };
    }
    if (raw.includes('surpris') || raw.includes('shock')) {
        return { color: '#f472b6', bg: 'rgba(244, 114, 182, 0.12)', border: 'rgba(244, 114, 182, 0.3)' };
    }
    if (raw.includes('normal') || raw.includes('calm')) {
        return { color: '#34d399', bg: 'rgba(16, 185, 129, 0.12)', border: 'rgba(16, 185, 129, 0.3)' };
    }
    return { color: '#a78bfa', bg: 'rgba(167, 139, 250, 0.12)', border: 'rgba(167, 139, 250, 0.3)' };
}

function renderEqIndicator() {
    const barWrap = document.createElement('span');
    barWrap.className = 'anomalous-audio-eq-bars';
    barWrap.style.display = 'none';
    barWrap.style.alignItems = 'flex-end';
    barWrap.style.gap = '2px';
    barWrap.style.height = '14px';
    barWrap.style.marginRight = '2px';

    const b1 = document.createElement('span');
    b1.className = 'anomalous-eq-bar-1';
    b1.style.width = '2px';
    b1.style.background = '#38bdf8';
    b1.style.borderRadius = '1px';

    const b2 = document.createElement('span');
    b2.className = 'anomalous-eq-bar-2';
    b2.style.width = '2px';
    b2.style.background = '#818cf8';
    b2.style.borderRadius = '1px';

    const b3 = document.createElement('span');
    b3.className = 'anomalous-eq-bar-3';
    b3.style.width = '2px';
    b3.style.background = '#38bdf8';
    b3.style.borderRadius = '1px';

    barWrap.appendChild(b1);
    barWrap.appendChild(b2);
    barWrap.appendChild(b3);
    return barWrap;
}

function renderSliceRow(slice) {
    const row = document.createElement('div');
    row.className = 'anomalous-voice-slice-row';
    row.draggable = true;

    row.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', slice.syntax_tag);
        e.dataTransfer.setData('application/json', JSON.stringify(slice));
        window.__anomalous_active_audio_slice = slice;
        setupCanvasAudioDrop();
    });
    row.addEventListener('dragend', () => {
        window.__anomalous_active_audio_slice = null;
    });

    const playBtn = document.createElement('button');
    playBtn.type = 'button';
    playBtn.className = 'anomalous-audio-play-btn';
    playBtn.innerHTML = SVG.PLAY;
    playBtn.title = t('audioPlay');

    const eqBars = renderEqIndicator();
    const emoStyle = getEmotionStyle(slice.emotion);

    const emoTag = document.createElement('span');
    emoTag.textContent = slice.emotion.toUpperCase();
    emoTag.style.fontSize = '9px';
    emoTag.style.fontWeight = '700';
    emoTag.style.letterSpacing = '0.5px';
    emoTag.style.padding = '2px 6px';
    emoTag.style.borderRadius = '4px';
    emoTag.style.color = emoStyle.color;
    emoTag.style.background = emoStyle.bg;
    emoTag.style.border = `1px solid ${emoStyle.border}`;
    emoTag.style.flexShrink = '0';

    const textSpan = document.createElement('div');
    textSpan.style.flex = '1';
    textSpan.style.fontSize = '12px';
    textSpan.style.color = '#cbd5e1';
    textSpan.style.whiteSpace = 'nowrap';
    textSpan.style.overflow = 'hidden';
    textSpan.style.textOverflow = 'ellipsis';
    textSpan.textContent = slice.text ? `“${slice.text}”` : slice.filename;
    textSpan.title = slice.text || slice.filename;

    const copyBtn = document.createElement('button');
    copyBtn.type = 'button';
    copyBtn.innerHTML = `${SVG.COPY} <span>${slice.syntax_tag}</span>`;
    copyBtn.title = t('audioCopyTag');
    copyBtn.style.display = 'inline-flex';
    copyBtn.style.alignItems = 'center';
    copyBtn.style.gap = '4px';
    copyBtn.style.padding = '2px 8px';
    copyBtn.style.borderRadius = '4px';
    copyBtn.style.border = '1px solid rgba(255, 255, 255, 0.08)';
    copyBtn.style.background = 'rgba(0, 0, 0, 0.3)';
    copyBtn.style.color = '#94a3b8';
    copyBtn.style.fontSize = '11px';
    copyBtn.style.fontFamily = 'monospace';
    copyBtn.style.cursor = 'pointer';
    copyBtn.style.flexShrink = '0';
    copyBtn.style.transition = 'all 0.15s ease';

    copyBtn.onclick = (e) => {
        e.stopPropagation();
        copySyntax(slice.syntax_tag, copyBtn);
    };

    playBtn.onclick = (e) => {
        e.stopPropagation();
        playAudio(slice.audio_url, playBtn, eqBars);
    };

    row.appendChild(playBtn);
    row.appendChild(eqBars);
    row.appendChild(emoTag);
    row.appendChild(textSpan);
    row.appendChild(copyBtn);
    return row;
}

function renderCharacterCard(charData) {
    const card = document.createElement('div');
    card.className = 'anomalous-character-voice-card';

    const header = document.createElement('div');
    header.style.display = 'flex';
    header.style.alignItems = 'center';
    header.style.justifyContent = 'space-between';

    const titleGroup = document.createElement('div');
    titleGroup.style.display = 'flex';
    titleGroup.style.alignItems = 'center';
    titleGroup.style.gap = '10px';

    const isArona = charData.character.toLowerCase() === 'arona';
    const avatar = document.createElement('div');
    avatar.style.width = '32px';
    avatar.style.height = '32px';
    avatar.style.borderRadius = '8px';
    avatar.style.background = isArona
        ? 'linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(99, 102, 241, 0.35))'
        : 'rgba(255, 255, 255, 0.06)';
    avatar.style.border = isArona ? '1px solid rgba(56, 189, 248, 0.4)' : '1px solid rgba(255, 255, 255, 0.1)';
    avatar.style.boxShadow = isArona ? '0 0 12px rgba(14, 165, 233, 0.25)' : 'none';
    avatar.style.display = 'flex';
    avatar.style.alignItems = 'center';
    avatar.style.justifyContent = 'center';
    avatar.style.color = isArona ? '#38bdf8' : '#94a3b8';
    avatar.innerHTML = SVG.MIC;

    const nameBox = document.createElement('div');
    nameBox.style.display = 'flex';
    nameBox.style.flexDirection = 'column';

    const name = document.createElement('span');
    name.style.fontSize = '14px';
    name.style.fontWeight = '600';
    name.style.color = '#f8fafc';
    name.textContent = charData.character;

    const sub = document.createElement('span');
    sub.style.fontSize = '11px';
    sub.style.color = '#64748b';
    sub.textContent = t('audioDragHint');

    nameBox.appendChild(name);
    nameBox.appendChild(sub);

    const countBadge = document.createElement('span');
    countBadge.style.fontSize = '11px';
    countBadge.style.padding = '3px 8px';
    countBadge.style.borderRadius = '12px';
    countBadge.style.background = 'rgba(255, 255, 255, 0.05)';
    countBadge.style.border = '1px solid rgba(255, 255, 255, 0.08)';
    countBadge.style.color = '#94a3b8';
    countBadge.textContent = `${charData.total_slices} ${t('audioVoicePresets')}`;

    titleGroup.appendChild(avatar);
    titleGroup.appendChild(nameBox);
    header.appendChild(titleGroup);
    header.appendChild(countBadge);
    card.appendChild(header);

    const sliceList = document.createElement('div');
    sliceList.style.display = 'flex';
    sliceList.style.flexDirection = 'column';
    sliceList.style.gap = '6px';

    charData.slices.forEach(slice => {
        sliceList.appendChild(renderSliceRow(slice));
    });

    card.appendChild(sliceList);
    return card;
}

function setupCanvasAudioDrop() {
    if (window.__anomalous_canvas_audio_drop_bound) return;
    window.__anomalous_canvas_audio_drop_bound = true;

    window.addEventListener('drop', (e) => {
        const slice = window.__anomalous_active_audio_slice;
        if (!slice || !app?.graph || !app?.canvas) return;

        const surface = app.canvas.canvas;
        if (!surface) return;
        const rect = surface.getBoundingClientRect();
        if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) return;

        let pos = null;
        if (app.canvas.convertEventToCanvasOffset) pos = app.canvas.convertEventToCanvasOffset(e);
        else if (app.canvas.adjustMouseEvent) { app.canvas.adjustMouseEvent(e); pos = [e.canvasX, e.canvasY]; }
        if (!pos) return;

        const node = app.graph.getNodeOnPos?.(pos[0], pos[1]);
        if (!node) return;

        const sampleWidget = node.widgets?.find(w => w.name === 'sample' || w.name === 'audio' || w.name === 'prompt_audio');
        if (sampleWidget) {
            sampleWidget.value = `F5-TTS/${slice.filename}`;
            node.setDirtyCanvas(true, true);
        }
    }, true);
}

function createLoadWorkflowButton() {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'anomalous-audio-load-wf-btn';
    btn.innerHTML = `<span>⚡</span> <span>${t('audioLoadAronaWorkflow')}</span>`;
    btn.style.display = 'inline-flex';
    btn.style.alignItems = 'center';
    btn.style.gap = '6px';
    btn.style.padding = '5px 12px';
    btn.style.borderRadius = '8px';
    btn.style.border = '1px solid rgba(129, 140, 248, 0.4)';
    btn.style.background = 'linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(56, 189, 248, 0.2))';
    btn.style.color = '#e0e7ff';
    btn.style.fontSize = '12px';
    btn.style.fontWeight = '500';
    btn.style.cursor = 'pointer';
    btn.style.transition = 'all 0.2s cubic-bezier(0.16, 1, 0.3, 1)';
    btn.style.boxShadow = '0 2px 10px rgba(99, 102, 241, 0.2)';

    btn.onmouseenter = () => {
        btn.style.background = 'linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(56, 189, 248, 0.35))';
        btn.style.borderColor = 'rgba(129, 140, 248, 0.7)';
        btn.style.transform = 'translateY(-1px)';
    };
    btn.onmouseleave = () => {
        btn.style.background = 'linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(56, 189, 248, 0.2))';
        btn.style.borderColor = 'rgba(129, 140, 248, 0.4)';
        btn.style.transform = 'translateY(0)';
    };

    btn.onclick = async () => {
        try {
            btn.style.opacity = '0.6';
            const resp = await fetch('/anomalous/audio_template_workflow?name=arona');
            const data = await resp.json();
            if (data.workflow && app.loadGraphData) {
                await app.loadGraphData(data.workflow);
                btn.innerHTML = `<span>✅</span> <span>${t('audioWorkflowLoaded')}</span>`;
                setTimeout(() => {
                    btn.innerHTML = `<span>⚡</span> <span>${t('audioLoadAronaWorkflow')}</span>`;
                    btn.style.opacity = '1';
                }, 2000);
            }
        } catch (e) {
            console.error('Failed to load Arona workflow:', e);
            btn.style.opacity = '1';
        }
    };
    return btn;
}

function createAddVoiceButton(onVoiceAdded) {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'anomalous-audio-add-voice-btn';
    btn.innerHTML = `<span>➕</span> <span>${t('audioAddVoice')}</span>`;
    btn.style.display = 'inline-flex';
    btn.style.alignItems = 'center';
    btn.style.gap = '6px';
    btn.style.padding = '5px 12px';
    btn.style.borderRadius = '8px';
    btn.style.border = '1px solid rgba(52, 211, 153, 0.4)';
    btn.style.background = 'linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.15))';
    btn.style.color = '#a7f3d0';
    btn.style.fontSize = '12px';
    btn.style.fontWeight = '500';
    btn.style.cursor = 'pointer';
    btn.style.transition = 'all 0.2s cubic-bezier(0.16, 1, 0.3, 1)';
    btn.style.boxShadow = '0 2px 10px rgba(16, 185, 129, 0.15)';

    btn.onmouseenter = () => {
        btn.style.background = 'linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(52, 211, 153, 0.3))';
        btn.style.borderColor = 'rgba(52, 211, 153, 0.7)';
        btn.style.transform = 'translateY(-1px)';
    };
    btn.onmouseleave = () => {
        btn.style.background = 'linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.15))';
        btn.style.borderColor = 'rgba(52, 211, 153, 0.4)';
        btn.style.transform = 'translateY(0)';
    };

    btn.onclick = () => {
        openAudioUploaderModal({
            onSaved: (slice) => {
                if (typeof onVoiceAdded === 'function') {
                    onVoiceAdded(slice);
                }
            }
        });
    };
    return btn;
}

function renderStudioToolbar(onSearch, onVoiceAdded) {
    const toolbar = document.createElement('div');
    toolbar.className = 'anomalous-audio-toolbar';

    const titleGroup = document.createElement('div');
    titleGroup.className = 'anomalous-audio-title-group';

    const iconBox = document.createElement('div');
    iconBox.className = 'anomalous-audio-icon-box';
    iconBox.innerHTML = SVG.MIC;

    const textGroup = document.createElement('div');
    textGroup.style.display = 'flex';
    textGroup.style.flexDirection = 'column';

    const title = document.createElement('span');
    title.className = 'anomalous-audio-title-text';
    title.textContent = t('audioStudioTitle');

    const desc = document.createElement('span');
    desc.className = 'anomalous-audio-sub-text';
    desc.style.marginLeft = '0';
    desc.textContent = t('audioStudioSubtitle');

    textGroup.appendChild(title);
    textGroup.appendChild(desc);

    titleGroup.appendChild(iconBox);
    titleGroup.appendChild(textGroup);

    const rightActions = document.createElement('div');
    rightActions.style.display = 'flex';
    rightActions.style.alignItems = 'center';
    rightActions.style.gap = '10px';

    const searchWrap = document.createElement('div');
    searchWrap.style.display = 'flex';
    searchWrap.style.alignItems = 'center';
    searchWrap.style.gap = '6px';
    searchWrap.style.background = 'rgba(0, 0, 0, 0.25)';
    searchWrap.style.border = '1px solid rgba(255, 255, 255, 0.1)';
    searchWrap.style.borderRadius = '8px';
    searchWrap.style.padding = '4px 10px';

    const searchIcon = document.createElement('span');
    searchIcon.style.color = '#64748b';
    searchIcon.innerHTML = SVG.SEARCH;

    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = t('audioVoicePresets');
    searchInput.style.background = 'transparent';
    searchInput.style.border = 'none';
    searchInput.style.outline = 'none';
    searchInput.style.color = '#f1f5f9';
    searchInput.style.fontSize = '12px';
    searchInput.style.width = '140px';
    searchInput.oninput = (e) => onSearch(e.target.value.toLowerCase());

    searchWrap.appendChild(searchIcon);
    searchWrap.appendChild(searchInput);

    const addVoiceBtn = createAddVoiceButton(onVoiceAdded);
    const loadWfBtn = createLoadWorkflowButton();
    rightActions.appendChild(addVoiceBtn);
    rightActions.appendChild(loadWfBtn);
    rightActions.appendChild(searchWrap);

    toolbar.appendChild(titleGroup);
    toolbar.appendChild(rightActions);
    return toolbar;
}

export async function renderAudioStudio(container, filter = null) {
    stopAudioStudioPlayback();
    container.innerHTML = '';

    const studioWrapper = document.createElement('div');
    studioWrapper.className = 'anomalous-audio-studio-wrapper';

    try {
        const resp = await fetch('/anomalous/audio_voices');
        const data = await resp.json();
        let characters = data.characters || [];

        // Apply character filter if selected from sidebar
        if (filter && filter.type === 'character' && filter.value) {
            characters = characters.filter(c => c.character.toLowerCase() === filter.value.toLowerCase());
        }

        const grid = document.createElement('div');
        grid.style.display = 'grid';
        grid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(380px, 1fr))';
        grid.style.gap = '16px';

        const toolbar = renderStudioToolbar((searchTerm) => {
            const cards = grid.querySelectorAll('.anomalous-character-voice-card');
            cards.forEach(card => {
                const text = card.textContent.toLowerCase();
                card.style.display = text.includes(searchTerm) ? 'flex' : 'none';
            });
        }, () => {
            renderAudioStudio(container, filter);
        });
        studioWrapper.appendChild(toolbar);

        if (characters.length === 0) {
            const emptyGuide = document.createElement('div');
            emptyGuide.style.padding = '70px 20px';
            emptyGuide.style.textAlign = 'center';
            emptyGuide.style.color = '#64748b';
            emptyGuide.innerHTML = `
                <div style="font-size:32px;margin-bottom:12px;opacity:0.6;">🎙️</div>
                <div style="color:#cbd5e1;font-size:14px;font-weight:600;margin-bottom:6px;">${t('audioEmptyTitle')}</div>
                <div style="font-size:12px;max-width:420px;margin:0 auto;line-height:1.6;">${t('audioEmptyDesc')}</div>
            `;
            studioWrapper.appendChild(emptyGuide);
        } else {
            characters.forEach(charData => {
                grid.appendChild(renderCharacterCard(charData));
            });
            studioWrapper.appendChild(grid);
        }
    } catch (e) {
        console.error('Failed to load audio voices:', e);
    }

    container.appendChild(studioWrapper);
}