'use client'

import { useRef, useEffect } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { html } from '@codemirror/lang-html'
import { css } from '@codemirror/lang-css'
import { javascript } from '@codemirror/lang-javascript'
import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'

interface CodeEditorProps {
  value: string
  onChange: (value: string) => void
  language: 'html' | 'css' | 'js'
}

export function CodeEditor({ value, onChange, language }: CodeEditorProps) {
  const editorRef = useRef<HTMLDivElement>(null)

  const extensions = [
    EditorView.lineWrapping,
    EditorView.theme({
      '&': {
        height: '100%',
        fontSize: '14px',
      },
      '.cm-content': {
        padding: '12px',
      },
      '.cm-gutters': {
        backgroundColor: '#1e293b',
        border: 'none',
      },
      '.cm-lineNumbers .cm-gutterElement': {
        color: '#64748b',
        padding: '0 8px',
      },
    }),
    EditorState.tabSize.of(2),
  ]

  const getExtensions = () => {
    const baseExtensions = [...extensions]
    if (language === 'html') baseExtensions.push(html())
    if (language === 'css') baseExtensions.push(css())
    if (language === 'js') baseExtensions.push(javascript())
    return baseExtensions
  }

  return (
    <div className="h-full bg-dark-950" ref={editorRef}>
      <CodeMirror
        value={value}
        height="100%"
        extensions={getExtensions()}
        onChange={onChange}
        theme="dark"
        basicSetup={{
          lineNumbers: true,
          highlightActiveLineGutter: true,
          highlightSpecialChars: true,
          foldGutter: true,
          drawSelection: true,
          dropCursor: false,
          allowMultipleSelections: true,
          indentOnInput: true,
          bracketMatching: true,
          closeBrackets: true,
          autocompletion: true,
          rectangularSelection: false,
          crosshairCursor: false,
          highlightActiveLine: true,
          highlightSelectionMatches: true,
          closeBracketsKeymap: true,
          defaultKeymap: true,
          searchKeymap: false,
          historyKeymap: true,
          foldKeymap: true,
          completionKeymap: true,
          lintKeymap: true,
        }}
      />
    </div>
  )
}