"use client";

import CodeMirror from "@uiw/react-codemirror";
import { xml } from "@codemirror/lang-xml";
import { EditorView } from "@codemirror/view";
import { Extension } from "@codemirror/state";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";
import { cn } from "@/lib/utils";

interface XmlSyntaxEditorProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
  "data-testid"?: string;
}

// Syntax highlighting that uses CSS variables from the app's theme system
// This automatically adapts to any theme (dark, light, dracula, nord, etc.)
const syntaxColors = HighlightStyle.define([
  // XML tags - use primary color
  { tag: t.tagName, color: "var(--primary)" },
  { tag: t.angleBracket, color: "var(--muted-foreground)" },

  // Attributes
  { tag: t.attributeName, color: "var(--chart-2, oklch(0.6 0.118 184.704))" },
  { tag: t.attributeValue, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },

  // Strings and content
  { tag: t.string, color: "var(--chart-1, oklch(0.646 0.222 41.116))" },
  { tag: t.content, color: "var(--foreground)" },

  // Comments
  { tag: t.comment, color: "var(--muted-foreground)", fontStyle: "italic" },

  // Special
  { tag: t.processingInstruction, color: "var(--muted-foreground)" },
  { tag: t.documentMeta, color: "var(--muted-foreground)" },
]);

// Editor theme using CSS variables
const editorTheme = EditorView.theme({
  "&": {
    height: "100%",
    fontSize: "0.875rem",
    fontFamily: "ui-monospace, monospace",
    backgroundColor: "transparent",
    color: "var(--foreground)",
  },
  ".cm-scroller": {
    overflow: "auto",
    fontFamily: "ui-monospace, monospace",
  },
  ".cm-content": {
    padding: "1rem",
    minHeight: "100%",
    caretColor: "var(--primary)",
  },
  ".cm-cursor, .cm-dropCursor": {
    borderLeftColor: "var(--primary)",
  },
  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
    {
      backgroundColor: "oklch(0.55 0.25 265 / 0.3)",
    },
  ".cm-activeLine": {
    backgroundColor: "transparent",
  },
  ".cm-line": {
    padding: "0",
  },
  "&.cm-focused": {
    outline: "none",
  },
  ".cm-gutters": {
    display: "none",
  },
  ".cm-placeholder": {
    color: "var(--muted-foreground)",
    fontStyle: "italic",
  },
});

// Combine all extensions
const extensions: Extension[] = [
  xml(),
  syntaxHighlighting(syntaxColors),
  editorTheme,
];

export function XmlSyntaxEditor({
  value,
  onChange,
  placeholder,
  className,
  "data-testid": testId,
}: XmlSyntaxEditorProps) {
  return (
    <div className={cn("w-full h-full", className)} data-testid={testId}>
      <CodeMirror
        value={value}
        onChange={onChange}
        extensions={extensions}
        theme="none"
        placeholder={placeholder}
        className="h-full [&_.cm-editor]:h-full"
        basicSetup={{
          lineNumbers: false,
          foldGutter: false,
          highlightActiveLine: false,
          highlightSelectionMatches: true,
          autocompletion: true,
          bracketMatching: true,
          indentOnInput: true,
        }}
      />
    </div>
  );
}