"use client"

import { json } from "@codemirror/lang-json"
import { python } from "@codemirror/lang-python"
import { yaml } from "@codemirror/lang-yaml"
import type { Extension } from "@codemirror/state"
import { EditorView } from "@codemirror/view"
import ReactCodeMirror from "@uiw/react-codemirror"

import { cn } from "@/lib/utils"

interface CodeEditorProps {
  value: string
  onChange?: (value: string) => void
  language?: string
  readOnly?: boolean
  wrapLongLines?: boolean
  className?: string
}

function getLanguageExtension(language: string): Extension | null {
  switch (language) {
    case "python":
      return python()
    case "json":
      return json()
    case "yaml":
      return yaml()
    case "text":
    default:
      return null
  }
}

export function CodeEditor({
  value,
  onChange,
  language = "python",
  readOnly = false,
  wrapLongLines = false,
  className,
}: CodeEditorProps) {
  const languageExtension = getLanguageExtension(language)
  const extensions = [
    ...(languageExtension ? [languageExtension] : []),
    ...(wrapLongLines ? [EditorView.lineWrapping] : []),
  ]

  return (
    <ReactCodeMirror
      value={value}
      onChange={onChange}
      extensions={extensions}
      readOnly={readOnly}
      className={cn(
        // Ensure the editor and all its tooltips/autocomplete popups are fully rounded and do not stick out
        "max-w-full min-w-0 rounded-md text-xs focus-visible:outline-none",
        // Editor container
        "[&_.cm-editor]:min-w-0 [&_.cm-editor]:rounded-md [&_.cm-editor]:border [&_.cm-focused]:outline-none",
        // Scroller
        "[&_.cm-scroller]:min-w-0 [&_.cm-scroller]:overflow-auto [&_.cm-scroller]:rounded-md",
        wrapLongLines
          ? "[&_.cm-content]:min-w-0 [&_.cm-content]:w-full [&_.cm-line]:break-words [&_.cm-lineWrapping]:break-words [&_.cm-lineWrapping]:whitespace-pre-wrap"
          : "[&_.cm-content]:min-w-full [&_.cm-content]:w-max",
        // Tooltip (e.g., hover, autocomplete)
        "[&_.cm-tooltip]:rounded-md",
        // Autocomplete suggestion widget and its children
        // Autocomplete tooltip styling
        "[&_.cm-tooltip-autocomplete]:rounded-sm [&_.cm-tooltip-autocomplete]:p-0.5",
        // Autocomplete list styling
        "[&_.cm-tooltip-autocomplete>ul]:rounded-sm",
        // Autocomplete item styling
        "[&_.cm-tooltip-autocomplete>ul>li]:flex",
        "[&_.cm-tooltip-autocomplete>ul>li]:min-h-5",
        "[&_.cm-tooltip-autocomplete>ul>li]:items-center",
        "[&_.cm-tooltip-autocomplete>ul>li]:rounded-sm",
        "[&_.cm-tooltip-autocomplete>ul>li[aria-selected=true]]:bg-sky-200/50",
        "[&_.cm-tooltip-autocomplete>ul>li[aria-selected=true]]:text-accent-foreground",
        "[&_.cm-tooltip-autocomplete>ul>li]:py-2.5",
        className
      )}
    />
  )
}
