// ==========================================
// Chat Switchboard — CM6 Theme
// ==========================================
// Maps the app's CSS custom properties to CM6
// theme slots. Works in both light and dark mode.
//
// The theme is applied via EditorView.theme()
// which generates scoped CSS classes. Dark mode
// detection uses body.dark-theme (existing pattern).
// ==========================================

import { EditorView } from '@codemirror/view';

/**
 * Switchboard base theme — uses CSS variables so it
 * adapts automatically when the theme toggle fires.
 */
export const switchboardTheme = EditorView.theme({
    '&': {
        backgroundColor: 'var(--bg-surface, var(--bg))',
        color: 'var(--text)',
        fontSize: '14px',
    },
    '.cm-content': {
        fontFamily: 'var(--mono, monospace)',
        caretColor: 'var(--accent)',
        padding: '4px 0',
    },
    '&.cm-focused': {
        outline: 'none',
    },
    '.cm-cursor, .cm-dropCursor': {
        borderLeftColor: 'var(--accent)',
        borderLeftWidth: '2px',
    },
    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {
        backgroundColor: 'var(--accent-muted, rgba(99, 102, 241, 0.2))',
    },
    '.cm-activeLine': {
        backgroundColor: 'var(--bg-hover, rgba(255, 255, 255, 0.03))',
    },
    '.cm-gutters': {
        backgroundColor: 'var(--bg-2, var(--bg))',
        color: 'var(--text-3, #666)',
        borderRight: '1px solid var(--border)',
        minWidth: '40px',
    },
    '.cm-activeLineGutter': {
        backgroundColor: 'var(--bg-hover, rgba(255, 255, 255, 0.05))',
        color: 'var(--text-2)',
    },
    '.cm-foldPlaceholder': {
        backgroundColor: 'var(--bg-2)',
        color: 'var(--text-3)',
        border: '1px solid var(--border)',
        borderRadius: '3px',
        padding: '0 4px',
    },
    // Search panel
    '.cm-panels': {
        backgroundColor: 'var(--bg-2)',
        color: 'var(--text)',
        borderBottom: '1px solid var(--border)',
    },
    '.cm-panels.cm-panels-top': {
        borderBottom: '1px solid var(--border)',
    },
    '.cm-panels.cm-panels-bottom': {
        borderTop: '1px solid var(--border)',
    },
    '.cm-search input, .cm-search button': {
        backgroundColor: 'var(--bg-surface)',
        color: 'var(--text)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius, 4px)',
        fontSize: '13px',
    },
    '.cm-search input:focus': {
        borderColor: 'var(--accent)',
        outline: 'none',
    },
    // Autocomplete
    '.cm-tooltip': {
        backgroundColor: 'var(--bg-2)',
        color: 'var(--text)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius, 4px)',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
    },
    '.cm-tooltip-autocomplete > ul > li': {
        padding: '4px 8px',
    },
    '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
        backgroundColor: 'var(--accent)',
        color: '#fff',
    },
    // Matching brackets
    '.cm-matchingBracket': {
        backgroundColor: 'var(--accent-muted, rgba(99, 102, 241, 0.3))',
        outline: '1px solid var(--accent)',
    },
    '.cm-nonmatchingBracket': {
        color: 'var(--danger, #e74c3c)',
    },
    // Scrollbar
    '.cm-scroller': {
        fontFamily: 'var(--mono, monospace)',
        overflow: 'auto',
    },
});

/**
 * Minimal theme for the chat input — removes gutters,
 * line numbers, and active line highlighting.
 */
export const chatInputTheme = EditorView.theme({
    '&': {
        backgroundColor: 'transparent',
        color: 'var(--text)',
        fontSize: 'var(--msg-font, 14px)',
    },
    '.cm-content': {
        fontFamily: 'var(--font, system-ui, sans-serif)',
        caretColor: 'var(--text)',
        padding: '0',
        minHeight: '20px',
    },
    '&.cm-focused': {
        outline: 'none',
    },
    // Cursor: high-contrast, always visible in both themes
    '.cm-cursor, .cm-dropCursor': {
        borderLeftColor: 'var(--text)',
        borderLeftWidth: '2px',
    },
    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {
        backgroundColor: 'var(--accent-dim, rgba(99, 102, 241, 0.2))',
    },
    '.cm-line': {
        padding: '0',
    },
    '.cm-scroller': {
        fontFamily: 'var(--font, system-ui, sans-serif)',
        overflow: 'auto',
    },
    // Hide scrollbar but keep scrollable for auto-grow
    '.cm-scroller::-webkit-scrollbar': {
        display: 'none',
    },
    // Placeholder — vertically aligned with first line of input
    '.cm-placeholder': {
        color: 'var(--text-3, #888)',
        fontStyle: 'normal',
        lineHeight: 'inherit',
        pointerEvents: 'none',
    },
    // Tooltip/autocomplete inherits from base
    '.cm-tooltip': {
        backgroundColor: 'var(--bg-2)',
        color: 'var(--text)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius, 4px)',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
    },
    // ── Fenced code block decorations (WYSIWYG) ──
    // Lines inside fenced code blocks get a visual container
    '.cm-codeblock': {
        backgroundColor: 'var(--bg-surface, #18181b)',
        fontFamily: 'var(--mono, monospace)',
        fontSize: '13px',
        padding: '0 10px',
        borderLeft: '2px solid var(--accent, #6c9fff)',
    },
    '.cm-codeblock.cm-codeblock-open': {
        borderTopLeftRadius: 'var(--radius, 6px)',
        borderTopRightRadius: 'var(--radius, 6px)',
        paddingTop: '6px',
        color: 'var(--text-3, #6b6b7b)',
    },
    '.cm-codeblock.cm-codeblock-close': {
        borderBottomLeftRadius: 'var(--radius, 6px)',
        borderBottomRightRadius: 'var(--radius, 6px)',
        paddingBottom: '6px',
        color: 'var(--text-3, #6b6b7b)',
    },
});

/**
 * Theme for the note editor — full-height, no gutters,
 * with markdown live preview styling (heading sizes, blockquotes).
 */
export const noteEditorTheme = EditorView.theme({
    '&': {
        backgroundColor: 'var(--bg-surface, var(--bg))',
        color: 'var(--text)',
        fontSize: 'var(--msg-font, 14px)',
        minHeight: '200px',
        maxHeight: '60vh',
    },
    '.cm-content': {
        fontFamily: 'var(--font, system-ui, sans-serif)',
        caretColor: 'var(--accent)',
        padding: '8px 0',
        lineHeight: '1.6',
    },
    '&.cm-focused': {
        outline: 'none',
    },
    '.cm-cursor, .cm-dropCursor': {
        borderLeftColor: 'var(--accent)',
        borderLeftWidth: '2px',
    },
    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {
        backgroundColor: 'var(--accent-muted, rgba(99, 102, 241, 0.2))',
    },
    '.cm-line': {
        padding: '0 4px',
    },
    '.cm-scroller': {
        fontFamily: 'var(--font, system-ui, sans-serif)',
        overflow: 'auto',
    },
    // Tooltip/autocomplete
    '.cm-tooltip': {
        backgroundColor: 'var(--bg-2)',
        color: 'var(--text)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius, 4px)',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
    },
    '.cm-tooltip-autocomplete > ul > li': {
        padding: '4px 8px',
    },
    '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
        backgroundColor: 'var(--accent)',
        color: '#fff',
    },
    // ── Markdown live preview ──
    '.cm-md-heading': {
        fontWeight: 'bold',
    },
    '.cm-md-h1': {
        fontSize: '1.6em',
        lineHeight: '1.3',
    },
    '.cm-md-h2': {
        fontSize: '1.35em',
        lineHeight: '1.3',
    },
    '.cm-md-h3': {
        fontSize: '1.15em',
        lineHeight: '1.4',
    },
    '.cm-md-blockquote': {
        borderLeft: '3px solid var(--accent, #6c9fff)',
        paddingLeft: '12px',
        color: 'var(--text-2, #999)',
        fontStyle: 'italic',
    },
    // Fenced code blocks
    '.cm-codeblock': {
        backgroundColor: 'var(--bg-2, #1e1e2e)',
        fontFamily: 'var(--mono, monospace)',
        fontSize: '13px',
        padding: '0 10px',
        borderLeft: '2px solid var(--accent, #6c9fff)',
    },
    '.cm-codeblock.cm-codeblock-open': {
        borderTopLeftRadius: 'var(--radius, 6px)',
        borderTopRightRadius: 'var(--radius, 6px)',
        paddingTop: '6px',
        color: 'var(--text-3, #6b6b7b)',
    },
    '.cm-codeblock.cm-codeblock-close': {
        borderBottomLeftRadius: 'var(--radius, 6px)',
        borderBottomRightRadius: 'var(--radius, 6px)',
        paddingBottom: '6px',
        color: 'var(--text-3, #6b6b7b)',
    },
});
