import React from 'react';
import Editor from '@monaco-editor/react';
import { Card, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';

export const StandardEditor = ({
  content,
  onChange,
  readOnly = false,
  language = 'xml',
  validationError = null,
  autoScroll = false,
}) => {
  const editorRef = React.useRef(null);

  const scrollToBottom = () => {
    if (editorRef.current && autoScroll) {
      const model = editorRef.current.getModel();
      const lineCount = model.getLineCount();
      editorRef.current.revealLine(lineCount, monaco.editor.ScrollType.Smooth);
    }
  };

  const handleEditorDidMount = (editor) => {
    editorRef.current = editor;
    setTimeout(() => {
      scrollToBottom();
    }, 10);
  };

  React.useEffect(() => {
    scrollToBottom();
  }, [content, autoScroll]);

  return (
    <Card className="h-[calc(100vh-8rem)]">
      <CardContent className="p-0 h-full">
        {validationError && (
          <Alert variant="destructive" className="m-4">
            <AlertDescription>{validationError}</AlertDescription>
          </Alert>
        )}
        <Editor
          height="100%"
          language={language}
          value={content}
          onChange={onChange}
          onMount={handleEditorDidMount}
          options={{
            minimap: { enabled: false },
            lineNumbers: 'on',
            readOnly,
            fontSize: 14,
            automaticLayout: true,
            wordWrap: 'on',
          }}
        />
      </CardContent>
    </Card>
  );
};