"use client"

import * as React from "react"
import { createPortal } from "react-dom"
import { EditorContent, useEditor, useEditorState } from "@tiptap/react"
import { BubbleMenu } from "@tiptap/react/menus"
import Placeholder from "@tiptap/extension-placeholder"
import StarterKit from "@tiptap/starter-kit"

import { cn } from "../../lib/utils"
import { Button } from "./button"
import { Input } from "./input"
import { Kbd } from "./kbd"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "./popover"
import { Tip } from "./tip"

type RichTextEditorProps = Omit<
  React.ComponentProps<"div">,
  "children" | "defaultValue" | "onChange"
> & {
  value?: string
  defaultValue?: string
  onChange?: (html: string) => void
  name?: string
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
}

type EditorCommand = {
  label: string
  shortcut?: string
  icon: string
  active: boolean
  run: () => void
}

const EDITOR_TOGGLE_ACTIVE_CLASS =
  "border border-transparent aria-pressed:border-brand aria-pressed:bg-brand-tint aria-pressed:text-foreground hc:aria-pressed:border-foreground hc:aria-pressed:bg-accent hc:aria-pressed:text-accent-foreground forced-colors:aria-pressed:border-[CanvasText] forced-colors:aria-pressed:bg-[Highlight] forced-colors:aria-pressed:text-[HighlightText]"

function ToolbarButton({ command }: { command: EditorCommand }) {
  const button = (
    <Button
      type="button"
      variant="ghost"
      size="icon-sm"
      aria-label={command.label}
      aria-pressed={command.active}
      onMouseDown={(event) => event.preventDefault()}
      onClick={command.run}
      className={EDITOR_TOGGLE_ACTIVE_CLASS}
    >
      <i className={cn("fa-light", command.icon)} aria-hidden="true" />
    </Button>
  )

  return (
    <Tip
      label={
        <>
          <span>{command.label}</span>
          {command.shortcut ? <Kbd>{command.shortcut}</Kbd> : null}
        </>
      }
    >
      {button}
    </Tip>
  )
}

function normalizeLinkHref(value: string) {
  const href = value.trim()
  if (!href) return ""
  if (/^(https?:|mailto:|tel:)/i.test(href)) return href
  return `https://${href}`
}

function isAriaInvalid(value: React.AriaAttributes["aria-invalid"]) {
  return value === true || value === "true" || value === "grammar" || value === "spelling"
}

function isAriaTrue(value: React.AriaAttributes["aria-required"]) {
  return value === true || value === "true"
}

function editorHtml(editor: NonNullable<ReturnType<typeof useEditor>>) {
  return editor.isEmpty ? "" : editor.getHTML()
}

function normalizedHtml(value: string | undefined) {
  return !value || value === "<p></p>" ? "" : value
}

function editorAttributes({
  id,
  ariaLabel,
  ariaLabelledBy,
  ariaDescribedBy,
  ariaInvalid,
  ariaRequired,
  disabled,
  readOnly,
}: {
  id?: string
  ariaLabel?: string
  ariaLabelledBy?: string
  ariaDescribedBy?: string
  ariaInvalid?: React.AriaAttributes["aria-invalid"]
  ariaRequired?: React.AriaAttributes["aria-required"]
  disabled: boolean
  readOnly: boolean
}) {
  const attributes: Record<string, string> = {
    role: "textbox",
    "aria-multiline": "true",
    class: "min-h-36 px-3 py-2.5 text-sm text-foreground outline-none",
  }

  if (id) attributes.id = id
  if (ariaLabelledBy) attributes["aria-labelledby"] = ariaLabelledBy
  if (ariaLabel) attributes["aria-label"] = ariaLabel
  else if (!ariaLabelledBy) attributes["aria-label"] = "Rich text editor"
  if (ariaDescribedBy) attributes["aria-describedby"] = ariaDescribedBy
  if (ariaInvalid) attributes["aria-invalid"] = String(ariaInvalid)
  if (isAriaTrue(ariaRequired)) attributes["aria-required"] = "true"
  if (readOnly) {
    attributes["aria-readonly"] = "true"
    attributes.tabindex = "0"
  }
  if (disabled) attributes["aria-disabled"] = "true"

  return attributes
}

function RichTextLinkControl({
  editor,
  compact = false,
  active = false,
  disabled = false,
}: {
  editor: NonNullable<ReturnType<typeof useEditor>>
  compact?: boolean
  active?: boolean
  disabled?: boolean
}) {
  const [open, setOpen] = React.useState(false)
  const [href, setHref] = React.useState("")
  const selectionRef = React.useRef({ from: 0, to: 0 })

  function handleOpenChange(nextOpen: boolean) {
    if (nextOpen) {
      const { from, to } = editor.state.selection
      selectionRef.current = { from, to }
      setHref(editor.getAttributes("link").href ?? "")
    }
    setOpen(nextOpen)
  }

  function applyLink() {
    const normalizedHref = normalizeLinkHref(href)
    if (!normalizedHref) return
    editor
      .chain()
      .focus()
      .setTextSelection(selectionRef.current)
      .extendMarkRange("link")
      .setLink({ href: normalizedHref })
      .run()
    setOpen(false)
  }

  function removeLink() {
    editor
      .chain()
      .focus()
      .setTextSelection(selectionRef.current)
      .extendMarkRange("link")
      .unsetLink()
      .run()
    setOpen(false)
  }

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <Tip label="Link">
        <PopoverTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size={compact ? "icon-xs" : "icon-sm"}
            aria-label="Link"
            data-active={active ? "" : undefined}
            disabled={disabled}
            className="border border-transparent data-[active]:border-brand data-[active]:bg-brand-tint data-[active]:text-foreground hc:data-[active]:border-foreground hc:data-[active]:bg-accent hc:data-[active]:text-accent-foreground forced-colors:data-[active]:border-[CanvasText] forced-colors:data-[active]:bg-[Highlight] forced-colors:data-[active]:text-[HighlightText]"
          >
            <i className="fa-light fa-link" aria-hidden="true" />
          </Button>
        </PopoverTrigger>
      </Tip>
      <PopoverContent
        data-rich-text-editor-popover=""
        align="center"
        className="flex w-72 flex-col gap-3 p-3"
      >
        <label className="flex flex-col gap-1.5 text-sm font-medium">
          Link address
          <Input
            value={href}
            onChange={(event) => setHref(event.target.value)}
            placeholder="https://example.com"
            inputMode="url"
            autoComplete="url"
            spellCheck={false}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.preventDefault()
                applyLink()
              }
            }}
          />
        </label>
        <div className="flex justify-end gap-2">
          {editor.isActive("link") ? (
            <Button type="button" variant="ghost" size="sm" onClick={removeLink}>
              Remove
            </Button>
          ) : null}
          <Button type="button" size="sm" disabled={!href.trim()} onClick={applyLink}>
            Apply
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}

const RichTextEditor = React.forwardRef<HTMLDivElement, RichTextEditorProps>(
  function RichTextEditor(
    {
      value,
      defaultValue = "",
      onChange,
      name,
      placeholder = "Start writing",
      disabled = false,
      readOnly = false,
      className,
      id,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "aria-describedby": ariaDescribedBy,
      "aria-invalid": ariaInvalid,
      "aria-required": ariaRequired,
      onFocus,
      onBlur,
      ...props
    },
    ref,
  ) {
    const onChangeRef = React.useRef(onChange)
    const hiddenInputRef = React.useRef<HTMLInputElement>(null)
    React.useLayoutEffect(() => {
      onChangeRef.current = onChange
    })

    const editor = useEditor({
      immediatelyRender: false,
      editable: !disabled && !readOnly,
      content: value ?? defaultValue,
      extensions: [
        StarterKit.configure({
          heading: { levels: [2, 3] },
          link: {
            openOnClick: false,
            autolink: true,
            defaultProtocol: "https",
          },
        }),
        Placeholder.configure({ placeholder }),
      ],
      editorProps: {
        attributes: editorAttributes({
          id,
          ariaLabel,
          ariaLabelledBy,
          ariaDescribedBy,
          ariaInvalid,
          ariaRequired,
          disabled,
          readOnly,
        }),
      },
      onUpdate({ editor: currentEditor }) {
        const html = editorHtml(currentEditor)
        if (hiddenInputRef.current) hiddenInputRef.current.value = html
        onChangeRef.current?.(html)
      },
    })

    React.useEffect(() => {
      if (!editor) return
      const nextEditable = !disabled && !readOnly
      if (editor.isEditable !== nextEditable) editor.setEditable(nextEditable, false)
      editor.setOptions({
        editorProps: {
          attributes: editorAttributes({
            id,
            ariaLabel,
            ariaLabelledBy,
            ariaDescribedBy,
            ariaInvalid,
            ariaRequired,
            disabled,
            readOnly,
          }),
        },
      })
    }, [
      ariaDescribedBy,
      ariaInvalid,
      ariaLabel,
      ariaLabelledBy,
      ariaRequired,
      disabled,
      editor,
      id,
      readOnly,
    ])

    React.useEffect(() => {
      if (!editor || value === undefined || value === editorHtml(editor)) {
        return
      }
      editor.commands.setContent(value, { emitUpdate: false })
      if (hiddenInputRef.current) {
        hiddenInputRef.current.value = normalizedHtml(value)
      }
    }, [editor, value])

    const activeFormatting =
      useEditorState({
        editor,
        selector: ({ editor: currentEditor }) => {
          if (!currentEditor) return ""
          return [
            currentEditor.isActive("heading", { level: 2 }) ? "h2" : "",
            currentEditor.isActive("heading", { level: 3 }) ? "h3" : "",
            currentEditor.isActive("bulletList") ? "bullet" : "",
            currentEditor.isActive("orderedList") ? "ordered" : "",
            currentEditor.isActive("blockquote") ? "quote" : "",
            currentEditor.isActive("bold") ? "bold" : "",
            currentEditor.isActive("italic") ? "italic" : "",
            currentEditor.isActive("underline") ? "underline" : "",
            currentEditor.isActive("strike") ? "strike" : "",
            currentEditor.isActive("link") ? "link" : "",
            currentEditor.state.selection.empty ? "collapsed" : "",
          ]
            .filter(Boolean)
            .join("|")
        },
      }) ?? ""
    const active = new Set(activeFormatting.split("|"))

    const blockCommands: EditorCommand[] = editor
      ? [
          {
            label: "Heading 2",
            icon: "fa-h2",
            active: active.has("h2"),
            run: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
          },
          {
            label: "Heading 3",
            icon: "fa-h3",
            active: active.has("h3"),
            run: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
          },
          {
            label: "Bulleted list",
            icon: "fa-list-ul",
            active: active.has("bullet"),
            run: () => editor.chain().focus().toggleBulletList().run(),
          },
          {
            label: "Numbered list",
            icon: "fa-list-ol",
            active: active.has("ordered"),
            run: () => editor.chain().focus().toggleOrderedList().run(),
          },
          {
            label: "Quote",
            icon: "fa-block-quote",
            active: active.has("quote"),
            run: () => editor.chain().focus().toggleBlockquote().run(),
          },
        ]
      : []

    const markCommands: EditorCommand[] = editor
      ? [
          {
            label: "Bold",
            shortcut: "⌘B",
            icon: "fa-bold",
            active: active.has("bold"),
            run: () => editor.chain().focus().toggleBold().run(),
          },
          {
            label: "Italic",
            shortcut: "⌘I",
            icon: "fa-italic",
            active: active.has("italic"),
            run: () => editor.chain().focus().toggleItalic().run(),
          },
          {
            label: "Underline",
            shortcut: "⌘U",
            icon: "fa-underline",
            active: active.has("underline"),
            run: () => editor.chain().focus().toggleUnderline().run(),
          },
          {
            label: "Strikethrough",
            shortcut: "⌘⇧S",
            icon: "fa-strikethrough",
            active: active.has("strike"),
            run: () => editor.chain().focus().toggleStrike().run(),
          },
        ]
      : []

    const canEdit = Boolean(editor) && !disabled && !readOnly

    return (
      <div
        ref={ref}
        data-slot="rich-text-editor"
        data-disabled={disabled ? "" : undefined}
        data-readonly={readOnly ? "" : undefined}
        data-invalid={isAriaInvalid(ariaInvalid) ? "" : undefined}
        tabIndex={-1}
        onFocus={(event) => {
          onFocus?.(event)
          if (!event.defaultPrevented && event.target === event.currentTarget) {
            editor?.commands.focus()
          }
        }}
        onBlur={(event) => {
          const nextTarget = event.relatedTarget
          const movedWithinEditor =
            event.currentTarget.contains(nextTarget) ||
            (nextTarget instanceof HTMLElement &&
              Boolean(nextTarget.closest("[data-rich-text-editor-popover]")))
          if (!movedWithinEditor) onBlur?.(event)
        }}
        className={cn(
          "overflow-hidden rounded-md border border-control-3 bg-background text-foreground transition-[border-color,box-shadow]",
          "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50",
          "data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive/20",
          "data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:text-muted-foreground",
          "data-[readonly]:bg-muted/40",
          "[&_.tiptap_p]:my-2 [&_.tiptap_p:first-child]:mt-0 [&_.tiptap_p:last-child]:mb-0",
          "[&_.tiptap_h2]:my-3 [&_.tiptap_h2]:text-lg [&_.tiptap_h2]:font-semibold",
          "[&_.tiptap_h3]:my-2 [&_.tiptap_h3]:text-base [&_.tiptap_h3]:font-semibold",
          "[&_.tiptap_ul]:my-2 [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:ps-6",
          "[&_.tiptap_ol]:my-2 [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:ps-6",
          "[&_.tiptap_blockquote]:my-3 [&_.tiptap_blockquote]:border-s-2 [&_.tiptap_blockquote]:border-brand [&_.tiptap_blockquote]:ps-3 [&_.tiptap_blockquote]:text-muted-foreground",
          "[&_.tiptap_a]:text-brand [&_.tiptap_a]:underline [&_.tiptap_a]:underline-offset-4",
          "[&_.tiptap_p.is-editor-empty:first-child::before]:pointer-events-none [&_.tiptap_p.is-editor-empty:first-child::before]:float-left [&_.tiptap_p.is-editor-empty:first-child::before]:h-0 [&_.tiptap_p.is-editor-empty:first-child::before]:text-muted-foreground [&_.tiptap_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
          className,
        )}
        {...props}
      >
        {canEdit ? (
          <div
            role="group"
            aria-label="Rich text block formatting"
            className="flex flex-wrap items-center gap-0.5 border-b border-border bg-muted/40 p-1"
          >
            {blockCommands.map((command) => (
              <ToolbarButton key={command.label} command={command} />
            ))}
            <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
            {markCommands.map((command) => (
              <ToolbarButton key={command.label} command={command} />
            ))}
            {editor ? (
              <RichTextLinkControl
                editor={editor}
                active={active.has("link")}
                disabled={active.has("collapsed") && !active.has("link")}
              />
            ) : null}
          </div>
        ) : null}

        {editor && canEdit
          ? createPortal(
              <BubbleMenu
                editor={editor}
                shouldShow={({ editor: currentEditor, from, to }) =>
                  from !== to &&
                  currentEditor.isEditable &&
                  currentEditor.state.doc
                    .textBetween(from, to)
                    .trim().length > 0
                }
                options={{
                  placement: "top",
                  offset: 8,
                  strategy: "fixed",
                }}
              >
                <div
                  role="group"
                  aria-label="Selected text formatting"
                  data-rich-text-editor-popover=""
                  className="flex items-center gap-0.5 rounded-lg border border-border bg-popover p-1 shadow-md"
                >
                  {markCommands.map((command) => (
                    <ToolbarButton key={command.label} command={command} />
                  ))}
                  <RichTextLinkControl
                    editor={editor}
                    compact
                    active={active.has("link")}
                    disabled={active.has("collapsed") && !active.has("link")}
                  />
                </div>
              </BubbleMenu>,
              document.body,
            )
          : null}

        <EditorContent editor={editor} />
        {name ? (
          <input
            ref={hiddenInputRef}
            type="hidden"
            name={name}
            defaultValue={
              editor ? editorHtml(editor) : normalizedHtml(value ?? defaultValue)
            }
            disabled={disabled}
          />
        ) : null}
      </div>
    )
  },
)

RichTextEditor.displayName = "RichTextEditor"

export { RichTextEditor }
export type { RichTextEditorProps }