import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor';
import type * as monacoTypes from 'monaco-editor';
import { v4 as uuidv4 } from 'uuid';
import { css } from '@emotion/css';
import { installAutoHeightLayout } from '../shared/autoHeightLayout';
import { hideMirroredInputAreaClassName } from '../shared/hideMirroredInputArea';
import { language, languageConfiguration } from './sql';
import { getSqlCompletionProvider } from './completion/getCompletionProvider';
import { formatSql } from './format';

interface SqlEditorProps {
  className?: string;
  maxHeight?: number | string;
  fontSize?: number;
  size?: 'small' | 'middle' | 'large';
  theme?: 'light' | 'dark';
  value?: string;
  placeholder?: string;
  enableAutocomplete?: boolean;
  readOnly?: boolean;
  disabled?: boolean;
  onChange?: (value: string) => void;
  onEnter?: (value: string) => void;
  onBlur?: (value: string) => void;
  onFocus?: (value: string) => void;
  editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
  /** Whether to show the format button. Default: false */
  enableFormat?: boolean;
  /** Custom format button renderer */
  renderFormatButton?: (handleFormat: () => void) => React.ReactNode;
}

export interface SqlEditorHandle {
  format: () => void;
}

const SQL_LANG_ID = 'sql';
const SIZE_MAP: Record<
  string,
  {
    className: string;
    top: number;
    bottom: number;
    minHeight: number;
  }
> = {
  small: {
    className: 'ant-input-sm',
    top: 1,
    bottom: 1,
    minHeight: 24,
  },
  middle: {
    className: 'ant-input-md',
    top: 1,
    bottom: 1,
    minHeight: 32,
  },
  large: {
    className: 'ant-input-lg',
    top: 3,
    bottom: 2,
    minHeight: 40,
  },
};

const themeMap: Record<string, string> = {
  light: 'sql-light',
  dark: 'sql-dark',
};

const containerDisabledClassName = css`
  .monaco-editor {
    user-select: none;
    pointer-events: none;
  }
`;

const containerReadOnlyClassName = css`
  .monaco-editor .cursors-layer > .cursor {
    opacity: 0 !important;
  }
`;

const cursorVisibleClassName = css`
  .monaco-editor .cursors-layer > .cursor {
    background-color: var(--sql-editor-cursor-color) !important;
  }
`;

const formatBtnClassName = css`
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
  opacity: 1;
  transition: opacity 0.15s;

  &:hover {
    background: var(--format-btn-hover-bg, rgba(128, 128, 128, 0.15));
  }
`;

const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>((props, ref) => {
  const id = uuidv4();
  const {
    className,
    maxHeight,
    fontSize,
    size = 'middle',
    theme = 'light',
    value = '',
    placeholder,
    enableFormat = false,
    enableAutocomplete = true,
    readOnly = false,
    disabled = false,
    onChange,
    onEnter,
    onBlur,
    onFocus,
    editorDidMount,
    renderFormatButton,
  } = props;

  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
  const modelRef = useRef<monaco.editor.ITextModel | null>(null);
  const disposablesRef = useRef<monaco.IDisposable[]>([]);

  useEffect(() => {
    // Register language
    if (!monaco.languages.getLanguages().some((lang) => lang.id === SQL_LANG_ID)) {
      monaco.languages.register({ id: SQL_LANG_ID });
      monaco.languages.setMonarchTokensProvider(SQL_LANG_ID, language as any);
      monaco.languages.setLanguageConfiguration(SQL_LANG_ID, languageConfiguration);
    }

    // Register completion provider
    if (enableAutocomplete) {
      const completionProvider = getSqlCompletionProvider();
      const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
        ...completionProvider,
        provideCompletionItems: (model, position, context, token) => {
          if (editorRef.current?.getModel()?.id !== model.id) {
            return { suggestions: [] };
          }
          return completionProvider.provideCompletionItems!(model, position, context, token);
        },
      };
      const disposable = monaco.languages.registerCompletionItemProvider(SQL_LANG_ID, filteringCompletionProvider);
      disposablesRef.current.push(disposable);
    }

    return () => {
      disposablesRef.current.forEach((disposable) => disposable.dispose());
      disposablesRef.current = [];
    };
  }, [enableAutocomplete]);

  const handleEditorMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
    editorRef.current = editor;
    modelRef.current = editor.getModel();

    monaco.editor.defineTheme('sql-light', {
      base: 'vs',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#00000000',
        focusBorder: '#00000000',
      },
    });

    monaco.editor.defineTheme('sql-dark', {
      base: 'vs-dark',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#00000000',
        focusBorder: '#00000000',
      },
    });

    const isEditorFocused = editor.createContextKey<boolean>('isEditorFocused' + id, false);
    // we setup on-blur
    editor.onDidBlurEditorWidget(() => {
      isEditorFocused.set(false);
      onBlur?.(editor.getValue());
      // reset the selection to the current position
      const position = editor.getPosition();
      if (position) {
        const newSelection = new monaco.Selection(position.lineNumber, position.column, position.lineNumber, position.column);
        editor.setSelection(newSelection);
      }
    });

    editor.onDidFocusEditorText(() => {
      isEditorFocused.set(true);
      onFocus?.(editor.getValue());
    });

    if (containerRef.current) {
      installAutoHeightLayout(editor, containerRef.current, { heightStyleProperty: 'minHeight' });
    }

    // Fixes Monaco capturing the search key binding and displaying a useless search box within the Editor.
    monaco.editor.addKeybindingRule({
      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
      command: null,
    });

    // 设置 Shift + Enter 为在光标位置换行
    editor.addCommand(
      monaco.KeyMod.Shift | monaco.KeyCode.Enter,
      () => {
        // 在光标位置插入换行符
        const position = editor.getPosition();
        if (position) {
          editor.executeEdits('shift-enter', [
            {
              range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
              text: '\n',
            },
          ]);
          // 将光标移动到新行
          editor.setPosition({
            lineNumber: position.lineNumber + 1,
            column: 1,
          });
        }
      },
      'isEditorFocused' + id,
    );

    // 完全阻止 Enter 键的默认行为（包括换行）
    monaco.editor.addKeybindingRule({
      keybinding: monaco.KeyCode.Enter,
      command: '-',
      when: '!suggestWidgetVisible',
    });

    // handle: enter - 只有在没有建议窗口时才执行自定义行为
    editor.addCommand(
      monaco.KeyCode.Enter,
      () => {
        onEnter?.(editor.getValue());
      },
      '!suggestWidgetVisible && isEditorFocused' + id,
    );

    editorDidMount?.(editor);
  };

  const handleFormat = useCallback(() => {
    const editor = editorRef.current;
    if (!editor) return;
    const currentValue = editor.getValue();
    const formatted = formatSql(currentValue);
    editor.setValue(formatted);
  }, []);

  useImperativeHandle(ref, () => ({
    format: handleFormat,
  }));

  const themeValue = themeMap[theme];

  return (
    <div
      className={
        'ant-input' +
        (size ? ` ${SIZE_MAP[size].className}` : '') +
        (disabled ? ` ant-input-disabled ${containerDisabledClassName}` : '') +
        (readOnly ? ` ${containerReadOnlyClassName}` : '') +
        (!readOnly && !disabled ? ` ${cursorVisibleClassName}` : '') +
        ` ${hideMirroredInputAreaClassName}` +
        (className ? ` ${className}` : '')
      }
      style={
        {
          display: 'block',
          resize: 'vertical',
          overflow: 'auto',
          position: 'relative',
          minHeight: SIZE_MAP[size].minHeight,
          maxHeight,
          '--sql-editor-cursor-color': theme === 'dark' ? '#ffffff' : '#000000',
        } as React.CSSProperties & { '--sql-editor-cursor-color': string }
      }
    >
      <div
        ref={containerRef}
        style={{
          height: '100%',
        }}
      >
        <MonacoEditor
          width='100%'
          height='100%'
          language={SQL_LANG_ID}
          theme={themeValue}
          value={value}
          onChange={onChange}
          editorDidMount={handleEditorMount}
          options={{
            editContext: false,
            // 使用浏览器原生右键菜单，替代 monaco 命令菜单
            contextmenu: false,
            minimap: { enabled: false },
            autoClosingBrackets: 'always',
            autoClosingQuotes: 'always',
            autoIndent: 'full',
            formatOnPaste: true,
            formatOnType: true,
            readOnly: readOnly || disabled,
            scrollBeyondLastLine: false,
            smoothScrolling: true,
            fontSize,
            tabSize: 2,
            wordWrap: 'on',
            fixedOverflowWidgets: true,
            glyphMargin: false,
            lineNumbers: 'off',
            lineNumbersMinChars: 0,
            folding: false,
            lineDecorationsWidth: 0,
            overviewRulerBorder: false,
            overviewRulerLanes: 0,
            placeholder: placeholder,
            renderLineHighlight: 'none',
            occurrencesHighlight: 'off',
            scrollbar: { vertical: 'hidden', horizontal: 'hidden', alwaysConsumeMouseWheel: false },
          }}
        />
      </div>
      {enableFormat &&
        (renderFormatButton ? (
          <div style={{ position: 'absolute', top: 4, right: 4, zIndex: 10 }} onClick={handleFormat}>
            {renderFormatButton(handleFormat)}
          </div>
        ) : (
          <button
            onClick={handleFormat}
            className={formatBtnClassName}
            title='Format SQL'
            style={
              {
                '--format-btn-hover-bg': theme === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(128,128,128,0.15)',
              } as React.CSSProperties
            }
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='12'
              height='12'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              strokeWidth='1'
              strokeLinecap='round'
              strokeLinejoin='round'
            >
              <path d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72' />
              <path d='m14 7 3 3' />
              <path d='M5 6v4' />
              <path d='M19 14v4' />
              <path d='M10 2v2' />
              <path d='M7 8H3' />
              <path d='M21 16h-4' />
              <path d='M11 3H9' />
            </svg>
          </button>
        ))}
    </div>
  );
});

export { default as SqlPreview } from './preview';
export default SqlEditor;