'use client';

import { useRef, useEffect } from 'react';
import type * as monaco from 'monaco-editor';

import { useMonaco } from '../hooks/useMonaco';
import { useEditorTheme } from '../hooks/useEditorTheme';
import type { DiffEditorProps } from '../types';

/**
 * Monaco Diff Editor Component
 *
 * Side-by-side or inline diff view for comparing two versions of content.
 *
 * @example
 * ```tsx
 * <DiffEditor
 *   original={originalCode}
 *   modified={modifiedCode}
 *   language="typescript"
 * />
 * ```
 */
export function DiffEditor({
  original,
  modified,
  language = 'plaintext',
  options = {},
  className = '',
  height = '100%',
}: DiffEditorProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null);
  const { monaco, isLoading } = useMonaco();
  const resolvedTheme = useEditorTheme(monaco, options.theme);

  // Create diff editor
  useEffect(() => {
    if (!monaco || !containerRef.current || editorRef.current) return;

    const editor = monaco.editor.createDiffEditor(containerRef.current, {
      theme: resolvedTheme,
      fontSize: options.fontSize || 14,
      fontFamily: options.fontFamily || "'Fira Code', 'Consolas', monospace",
      readOnly: true,
      automaticLayout: true,
      renderSideBySide: true,
      scrollBeyondLastLine: false,
      minimap: { enabled: false },
    });

    const originalModel = monaco.editor.createModel(original, language);
    const modifiedModel = monaco.editor.createModel(modified, language);

    editor.setModel({
      original: originalModel,
      modified: modifiedModel,
    });

    editorRef.current = editor;

    return () => {
      originalModel.dispose();
      modifiedModel.dispose();
      editor.dispose();
      editorRef.current = null;
    };
  }, [monaco]);

  // Update models when content changes
  useEffect(() => {
    const editor = editorRef.current;
    if (!editor || !monaco) return;

    const model = editor.getModel();
    if (model) {
      model.original.setValue(original);
      model.modified.setValue(modified);
    }
  }, [original, modified, monaco]);

  // Update language
  useEffect(() => {
    const editor = editorRef.current;
    if (!editor || !monaco) return;

    const model = editor.getModel();
    if (model) {
      monaco.editor.setModelLanguage(model.original, language);
      monaco.editor.setModelLanguage(model.modified, language);
    }
  }, [language, monaco]);

  if (isLoading) {
    return (
      <div
        className={className}
        style={{
          width: '100%',
          height,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#1e1e1e',
          color: '#666',
        }}
      >
        Loading diff editor...
      </div>
    );
  }

  return (
    <div
      ref={containerRef}
      className={className}
      style={{
        width: '100%',
        height,
      }}
    />
  );
}
