frontend/src/components/CodeEditor.tsx

import React, { useRef } from 'react';
import Editor, { OnMount } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';

const CodeEditor: React.FC<{ filePath: string | null; projectPath: string }> = ({ filePath, projectPath }) => {
  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);

  const handleEditorDidMount: OnMount = (editor, monaco) => {
    editorRef.current = editor;

    monaco.languages.registerInlineCompletionsProvider('*', {
      provideInlineCompletions: async (model, position, context, token) => {
        const prefix = model.getValueInRange({
          startLineNumber: 1,
          startColumn: 1,
          endLineNumber: position.lineNumber,
          endColumn: position.column,
        });
        const suffix = model.getValueInRange({
          startLineNumber: position.lineNumber,
          startColumn: position.column,
          endLineNumber: model.getLineCount(),
          endColumn: model.getLineMaxColumn(model.getLineCount()),
        });

        try {
          const resp = await fetch('/api/autocomplete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              prefix,
              suffix,
              filepath: filePath || '',
              language: model.getLanguageId(),
              max_tokens: 64,
              model: 'groq-llama-3.1-8b-instant',
            }),
          });
          if (!resp.ok) return { items: [] };
          const data = await resp.json();
          const completions = data.completions || [];
          return {
            items: completions.map((c: any) => ({
              insertText: c.text,
              range: {
                startLineNumber: position.lineNumber,
                startColumn: position.column,
                endLineNumber: position.lineNumber,
                endColumn: position.column,
              },
            })),
          };
        } catch (e) {
          return { items: [] };
        }
      },
      freeInlineCompletions: () => {},
    });
  };

  if (!filePath) return (
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', fontSize: 14 }}>
      ← Select a file from the explorer to start editing
    </div>
  );

  return (
    <Editor
      height="100%"
      defaultLanguage="typescript"
      theme="vs-dark"
      path={filePath}
      onMount={handleEditorDidMount}
      loading={<div style={{ color: 'var(--text-secondary)', padding: 20 }}>Loading editor...</div>}
      options={{
        fontSize: 13,
        minimap: { enabled: true },
        smoothScrolling: true,
        cursorBlinking: 'smooth',
        inlineSuggest: { enabled: true },
      }}
    />
  );
};

export default CodeEditor;