/**
 * ROBUST CodeMirror 6 Syntax Highlighting - Fixed Implementation
 *
 * This is the definitive fix for the white text issue and missing syntax highlighting.
 * Only uses VERIFIED tags from @lezer/highlight to avoid undefined errors.
 */

import { html } from '@codemirror/lang-html';
import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
import { tags } from '@lezer/highlight';
import { EditorView } from '@codemirror/view';

/**
 * ENHANCED VS Code Dark Theme - Comprehensive token coverage
 * Uses verified tags with extensive fallbacks for maximum compatibility
 */
export const comprehensiveVSCodeTheme = HighlightStyle.define([
  // === BASE CONTENT (CRITICAL - must be first) ===
  { tag: tags.content, color: '#d4d4d4' },
  { tag: tags.name, color: '#d4d4d4' },

  // === COMMENTS ===
  { tag: tags.comment, color: '#6a9955', fontStyle: 'italic' },
  { tag: tags.lineComment, color: '#6a9955', fontStyle: 'italic' },
  { tag: tags.blockComment, color: '#6a9955', fontStyle: 'italic' },

  // === STRINGS AND LITERALS ===
  { tag: tags.string, color: '#ce9178' },
  { tag: tags.character, color: '#ce9178' },
  { tag: tags.number, color: '#b5cea8' },
  { tag: tags.bool, color: '#569cd6' },
  { tag: tags.null, color: '#569cd6' },
  { tag: tags.regexp, color: '#d16969' },
  { tag: tags.escape, color: '#d7ba7d' },

  // === KEYWORDS ===
  { tag: tags.keyword, color: '#569cd6', fontWeight: 'bold' },
  { tag: tags.controlKeyword, color: '#c586c0', fontWeight: 'bold' },
  { tag: tags.operatorKeyword, color: '#569cd6' },
  { tag: tags.moduleKeyword, color: '#c586c0' },
  { tag: tags.definitionKeyword, color: '#569cd6' },

  // === HTML ELEMENTS ===
  { tag: tags.tagName, color: '#569cd6', fontWeight: 'bold' },
  { tag: tags.attributeName, color: '#92c5f8' },
  { tag: tags.attributeValue, color: '#ce9178' },
  { tag: tags.angleBracket, color: '#808080' },
  { tag: tags.quote, color: '#ce9178' },

  // === CSS SPECIFIC ===
  { tag: tags.propertyName, color: '#9cdcfe' },
  { tag: tags.className, color: '#d7ba7d' },
  { tag: tags.unit, color: '#b5cea8' },
  { tag: tags.color, color: '#ce9178' },
  { tag: tags.atom, color: '#569cd6' },

  // === PROGRAMMING CONSTRUCTS ===
  { tag: tags.variableName, color: '#9cdcfe' },
  { tag: tags.function, color: '#dcdcaa' },
  { tag: tags.definition, color: '#dcdcaa' },
  { tag: tags.typeName, color: '#4ec9b0' },
  { tag: tags.namespace, color: '#4ec9b0' },

  // === OPERATORS AND PUNCTUATION ===
  { tag: tags.operator, color: '#d4d4d4' },
  { tag: tags.punctuation, color: '#d4d4d4' },
  { tag: tags.paren, color: '#ffd700' },
  { tag: tags.bracket, color: '#ffd700' },
  { tag: tags.brace, color: '#ffd700' },
  { tag: tags.squareBracket, color: '#ffd700' },

  // === SPECIAL TOKENS ===
  { tag: tags.meta, color: '#569cd6' },
  { tag: tags.processingInstruction, color: '#569cd6' },
  { tag: tags.invalid, color: '#f44747', textDecoration: 'underline' },
  { tag: tags.link, color: '#4fc1ff', textDecoration: 'underline' },
  { tag: tags.heading, color: '#9cdcfe', fontWeight: 'bold' },
  { tag: tags.emphasis, fontStyle: 'italic' },
  { tag: tags.strong, fontWeight: 'bold' },
]);

/**
 * CLEAN Editor Theme - NO color conflicts
 * Only defines layout and structure, lets syntax highlighting handle colors
 */
export const cleanEditorTheme = EditorView.theme({
  "&": {
    height: "500px",
    backgroundColor: "#1e1e1e",
    fontSize: "14px",
    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
  },
  ".cm-content": {
    padding: "12px",
    backgroundColor: "#1e1e1e",
    fontSize: "14px",
    lineHeight: "20px",
    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
    color: "#d4d4d4", // Base text color for all content
  },
  ".cm-focused": {
    outline: "none",
  },
  ".cm-editor": {
    borderRadius: "0",
    border: "none",
  },
  ".cm-scroller": {
    fontFamily: "'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
  },
  ".cm-lineNumbers": {
    fontSize: "14px",
    lineHeight: "20px",
    color: "#858585",
    backgroundColor: "#1e1e1e",
    paddingRight: "8px",
    paddingLeft: "8px",
    borderRight: "1px solid #3e3e3e",
    minWidth: "45px",
    textAlign: "right",
  },
  ".cm-gutters": {
    backgroundColor: "#1e1e1e",
    borderRight: "1px solid #3e3e3e",
  },
  ".cm-activeLine": {
    backgroundColor: "#2a2d2e",
  },
  ".cm-selection": {
    backgroundColor: "#264f78",
  },
  ".cm-cursor": {
    borderLeft: "2px solid #ffffff",
  },
  // Additional fallback for text nodes
  ".cm-line": {
    color: "#d4d4d4",
  },
});

/**
 * ROBUST Extension Creator - Single, clean implementation
 * Uses only verified tags to avoid undefined errors
 */
export const createRobustExtensions = () => [
  // 1. HTML language support with proper parsing
  html(),

  // 2. SAFE syntax highlighting (using only confirmed tags)
  syntaxHighlighting(comprehensiveVSCodeTheme),

  // 3. Clean theme (structure only, no color conflicts)
  cleanEditorTheme,
];

// Export the main function
export default {
  comprehensiveVSCodeTheme,
  cleanEditorTheme,
  createRobustExtensions,
};
