components/code-editor.tsx

'use client';

import { useEffect, useRef } from 'react';
import { Editor } from '@monaco-editor/react';
import { cn } from '@/lib/utils';

interface CodeEditorProps {
  value: string;
  onChange: (value: string) => void;
  className?: string;
  language?: string;
  theme?: string;
}

export function CodeEditor({
  value,
  onChange,
  className,
  language = 'javascript',
  theme = 'vs-dark'
}: CodeEditorProps) {
  const editorRef = useRef<any>(null);

  const handleEditorDidMount = (editor: any) => {
    editorRef.current = editor;
    
    // Configure editor options
    editor.updateOptions({
      fontSize: 14,
      fontFamily: 'JetBrains Mono, Monaco, Consolas, "Courier New", monospace',
      minimap: { enabled: false },
      scrollBeyondLastLine: false,
      wordWrap: 'on',
      automaticLayout: true,
      tabSize: 2,
      insertSpaces: true,
      roundedSelection: false,
      readOnly: false,
      cursorStyle: 'line',
      lineNumbers: 'on',
      renderLineHighlight: 'line',
      selectOnLineNumbers: true,
      roundedSelection: false,
      renderIndentGuides: true,
      colorDecorators: true,
      lineDecorationsWidth: 0,
      lineNumbersMinChars: 3,
      folding: true,
      foldingHighlight: true,
      showFoldingControls: 'mouseover',
      smoothScrolling: true,
      contextmenu: true,
      mouseWheelZoom: true,
    });

    // Add custom key bindings
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
      // Handle save action
      console.log('Save action triggered');
    });

    // Add code completion suggestions
    const suggestions = [
      {
        label: 'console.log',
        kind: monaco.languages.CompletionItemKind.Function,
        insertText: 'console.log(${1:message});',
        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
        documentation: 'Log a message to the console'
      },
      {
        label: 'function',
        kind: monaco.languages.CompletionItemKind.Snippet,
        insertText: 'function ${1:functionName}(${2:params}) {\n\t${3:// function body}\n}',
        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
        documentation: 'Create a function'
      },
      {
        label: 'if',
        kind: monaco.languages.CompletionItemKind.Snippet,
        insertText: 'if (${1:condition}) {\n\t${2:// code}\n}',
        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
        documentation: 'Create an if statement'
      }
    ];

    // Register completion provider
    const completionProvider = {
      provideCompletionItems: () => ({
        suggestions: suggestions.map(suggestion => ({
          ...suggestion,
          range: undefined
        }))
      })
    };

    // Register the completion provider
    const disposable = monaco.languages.registerCompletionItemProvider(language, completionProvider);
    
    // Cleanup on unmount
    return () => {
      disposable.dispose();
    };
  };

  const handleEditorChange = (value: string | undefined) => {
    if (value !== undefined) {
      onChange(value);
    }
  };

  return (
    <div className={cn("monaco-editor-container", className)}>
      <Editor
        height="100%"
        defaultLanguage={language}
        theme={theme}
        value={value}
        onChange={handleEditorChange}
        onMount={handleEditorDidMount}
        options={{
          selectOnLineNumbers: true,
          roundedSelection: false,
          readOnly: false,
          cursorStyle: 'line',
          automaticLayout: true,
          wordWrap: 'on',
          minimap: { enabled: false },
          scrollBeyondLastLine: false,
          fontSize: 14,
          fontFamily: 'JetBrains Mono, Monaco, Consolas, "Courier New", monospace',
          tabSize: 2,
          insertSpaces: true,
          renderLineHighlight: 'line',
          lineNumbers: 'on',
          contextmenu: true,
          mouseWheelZoom: true,
          smoothScrolling: true,
          folding: true,
          foldingHighlight: true,
          showFoldingControls: 'mouseover',
        }}
      />
    </div>
  );
}