import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { Image } from '@tiptap/extension-image';
import { TaskItem, TaskList } from '@tiptap/extension-list';
import { TableKit } from '@tiptap/extension-table';
import {
  type Editor,
  EditorContent,
  useEditor,
  useEditorState,
} from '@tiptap/react';
// eslint-disable-next-line import/no-named-as-default
import StarterKit from '@tiptap/starter-kit';
import {
  LuBold,
  LuChevronDown,
  LuCode,
  LuFileCode,
  LuImage,
  LuItalic,
  LuLink,
  LuList,
  LuListOrdered,
  LuListTodo,
  LuMinus,
  LuQuote,
  LuRedo2,
  LuStrikethrough,
  LuTable,
  LuUndo2,
} from 'react-icons/lu';

import { cn } from '../copilot/cn';

import { htmlToMarkdown, markdownToEditorHtml } from './markdown-editor.shared';

interface MarkdownEditorProps {
  value: string;
  onChange: (markdown: string) => void;
  disabled?: boolean;
  className?: string;
}

const BLOCK_OPTIONS = [
  { value: 'p', label: 'Paragraph' },
  { value: 'h1', label: 'Heading 1' },
  { value: 'h2', label: 'Heading 2' },
  { value: 'h3', label: 'Heading 3' },
  { value: 'h4', label: 'Heading 4' },
] as const;

type BlockValue = (typeof BLOCK_OPTIONS)[number]['value'];

function ToolButton({
  onClick,
  active = false,
  disabled = false,
  label,
  children,
}: {
  onClick: () => void;
  active?: boolean;
  disabled?: boolean;
  label: string;
  children: React.ReactNode;
}): JSX.Element {
  return (
    <button
      type="button"
      // Without this the toolbar steals focus and the mark applies to nothing.
      onMouseDown={event => event.preventDefault()}
      onClick={onClick}
      disabled={disabled}
      aria-pressed={active}
      aria-label={label}
      title={label}
      className={cn(
        'grid size-[30px] shrink-0 place-items-center rounded-[7px] transition-colors',
        active
          ? 'bg-pink-50 text-pink-700'
          : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900',
        disabled && 'pointer-events-none opacity-40'
      )}
    >
      {children}
    </button>
  );
}

function ToolDivider(): JSX.Element {
  return (
    <span aria-hidden="true" className="mx-1 h-5 w-px shrink-0 bg-gray-200" />
  );
}

const activeBlock = (editor: Editor): BlockValue => {
  for (const level of [1, 2, 3, 4] as const) {
    if (editor.isActive('heading', { level })) return `h${level}` as BlockValue;
  }

  return 'p';
};

function useToolbarState(editor: Editor) {
  return useEditorState({
    editor,
    selector: ({ editor: instance }) => ({
      canUndo: instance.can().undo(),
      canRedo: instance.can().redo(),
      block: activeBlock(instance),
      bold: instance.isActive('bold'),
      italic: instance.isActive('italic'),
      strike: instance.isActive('strike'),
      code: instance.isActive('code'),
      link: instance.isActive('link'),
      bulletList: instance.isActive('bulletList'),
      orderedList: instance.isActive('orderedList'),
      taskList: instance.isActive('taskList'),
      blockquote: instance.isActive('blockquote'),
      codeBlock: instance.isActive('codeBlock'),
      table: instance.isActive('table'),
    }),
  });
}

function Toolbar({ editor }: { editor: Editor }): JSX.Element {
  const state = useToolbarState(editor);
  const setBlock = (value: BlockValue): void => {
    if (value === 'p') {
      editor.chain().focus().setParagraph().run();

      return;
    }
    const level = Number(value.slice(1)) as 1 | 2 | 3 | 4;
    editor.chain().focus().setHeading({ level }).run();
  };

  const promptForLink = (): void => {
    const previous = editor.getAttributes('link').href as string | undefined;
    const href = window.prompt('Link URL', previous ?? 'https://');
    if (href === null) return;
    if (href.trim() === '') {
      editor.chain().focus().extendMarkRange('link').unsetLink().run();

      return;
    }
    editor
      .chain()
      .focus()
      .extendMarkRange('link')
      .setLink({ href: href.trim() })
      .run();
  };

  const promptForImage = (): void => {
    const src = window.prompt('Image URL', 'https://');
    if (!src || !src.trim()) return;
    const alt = window.prompt('Alt text (describes the image)', '') ?? '';
    editor.chain().focus().setImage({ src: src.trim(), alt }).run();
  };

  return (
    <div className="vis-editor__toolbar flex flex-wrap items-center gap-0.5 border-b border-gray-200 px-2 py-1.5">
      <ToolButton
        label="Undo"
        onClick={() => editor.chain().focus().undo().run()}
        disabled={!state.canUndo}
      >
        <LuUndo2 className="size-4" />
      </ToolButton>
      <ToolButton
        label="Redo"
        onClick={() => editor.chain().focus().redo().run()}
        disabled={!state.canRedo}
      >
        <LuRedo2 className="size-4" />
      </ToolButton>

      <ToolDivider />

      <div className="relative">
        <select
          aria-label="Block type"
          value={state.block}
          onMouseDown={event => event.stopPropagation()}
          onChange={event => setBlock(event.target.value as BlockValue)}
          className="h-[30px] cursor-pointer appearance-none rounded-[7px] bg-transparent py-0 pl-2 pr-7 text-[13px] font-medium text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none"
        >
          {BLOCK_OPTIONS.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        <LuChevronDown
          aria-hidden="true"
          className="pointer-events-none absolute right-1.5 top-1/2 size-3.5 -translate-y-1/2 text-gray-500"
        />
      </div>

      <ToolDivider />

      <ToolButton
        label="Bold"
        active={state.bold}
        onClick={() => editor.chain().focus().toggleBold().run()}
      >
        <LuBold className="size-4" />
      </ToolButton>
      <ToolButton
        label="Italic"
        active={state.italic}
        onClick={() => editor.chain().focus().toggleItalic().run()}
      >
        <LuItalic className="size-4" />
      </ToolButton>
      <ToolButton
        label="Strikethrough"
        active={state.strike}
        onClick={() => editor.chain().focus().toggleStrike().run()}
      >
        <LuStrikethrough className="size-4" />
      </ToolButton>
      <ToolButton
        label="Inline code"
        active={state.code}
        onClick={() => editor.chain().focus().toggleCode().run()}
      >
        <LuCode className="size-4" />
      </ToolButton>
      <ToolButton label="Link" active={state.link} onClick={promptForLink}>
        <LuLink className="size-4" />
      </ToolButton>

      <ToolDivider />

      <ToolButton
        label="Bullet list"
        active={state.bulletList}
        onClick={() => editor.chain().focus().toggleBulletList().run()}
      >
        <LuList className="size-4" />
      </ToolButton>
      <ToolButton
        label="Numbered list"
        active={state.orderedList}
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
      >
        <LuListOrdered className="size-4" />
      </ToolButton>
      <ToolButton
        label="Task list"
        active={state.taskList}
        onClick={() => editor.chain().focus().toggleTaskList().run()}
      >
        <LuListTodo className="size-4" />
      </ToolButton>
      <ToolButton
        label="Quote"
        active={state.blockquote}
        onClick={() => editor.chain().focus().toggleBlockquote().run()}
      >
        <LuQuote className="size-4" />
      </ToolButton>

      <ToolDivider />

      <ToolButton
        label="Code block"
        active={state.codeBlock}
        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
      >
        <LuFileCode className="size-4" />
      </ToolButton>
      <ToolButton
        label="Divider"
        onClick={() => editor.chain().focus().setHorizontalRule().run()}
      >
        <LuMinus className="size-4" />
      </ToolButton>
      <ToolButton
        label="Table"
        active={state.table}
        onClick={() =>
          editor
            .chain()
            .focus()
            .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
            .run()
        }
      >
        <LuTable className="size-4" />
      </ToolButton>
      <ToolButton label="Image" onClick={promptForImage}>
        <LuImage className="size-4" />
      </ToolButton>
    </div>
  );
}

function MarkdownEditor({
  value,
  onChange,
  disabled = false,
  className,
}: MarkdownEditorProps): JSX.Element {
  // `onUpdate` is created once on mount, so it reads the handler from a ref.
  const onChangeRef = useRef(onChange);
  onChangeRef.current = onChange;

  const initialHtml = useMemo(() => markdownToEditorHtml(value), [value]);

  const editor = useEditor({
    // No DOM on the server, and rendering on the first client pass instead
    // would break hydration.
    immediatelyRender: false,
    editable: !disabled,
    extensions: [
      StarterKit.configure({
        link: { openOnClick: false, autolink: true },
        // Markdown has no underline syntax.
        underline: false,
      }),
      TaskList,
      TaskItem.configure({ nested: true }),
      TableKit.configure({ table: { resizable: true } }),
      Image.configure({ inline: false }),
    ],
    content: initialHtml,
    editorProps: {
      attributes: {
        spellcheck: 'true',
      },
    },
    onUpdate: ({ editor: instance }) => {
      onChangeRef.current(htmlToMarkdown(instance.getHTML()));
    },
  });

  useEffect(() => {
    editor?.setEditable(!disabled);
  }, [editor, disabled]);

  const focusEditor = useCallback(() => {
    editor?.chain().focus().run();
  }, [editor]);

  if (!editor) {
    return (
      <div
        className={cn(
          'h-[420px] animate-pulse rounded-[14px] border border-gray-200 bg-white',
          className
        )}
      />
    );
  }

  return (
    <div className={cn('vis-editor', disabled && 'opacity-60', className)}>
      <Toolbar editor={editor} />
      {/* Clicking the padding puts the caret in the document. */}
      <div
        className="px-5 py-4"
        onMouseDown={event => {
          if (event.target === event.currentTarget) {
            event.preventDefault();
            focusEditor();
          }
        }}
      >
        <EditorContent editor={editor} />
      </div>
    </div>
  );
}

export default MarkdownEditor;