import React, { useCallback, useEffect, useRef } from 'react'
import { mergeAttributes } from '@tiptap/core'
import Image from '@tiptap/extension-image'
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'

function clamp(value, min, max) {
  return Math.min(max, Math.max(min, value))
}

function parsePixelValue(rawValue) {
  const normalized = String(rawValue || '').trim()

  if (!normalized) {
    return null
  }

  const parsed = Number.parseFloat(normalized.replace(/px$/i, ''))
  return Number.isFinite(parsed) ? Math.round(parsed) : null
}

function readImageAttrs(element) {
  const imageElement = element.tagName?.toLowerCase() === 'img'
    ? element
    : element.querySelector?.('img')

  const captionElement = element.querySelector?.('figcaption')

  return {
    src: imageElement?.getAttribute('src') || '',
    alt: imageElement?.getAttribute('alt') || '',
    title: imageElement?.getAttribute('title') || '',
    caption: captionElement?.textContent?.trim() || '',
    width: parsePixelValue(
      element.getAttribute?.('data-width')
      || element.getAttribute?.('width')
      || imageElement?.getAttribute('width')
      || element.style?.width
      || '',
    ),
  }
}

function RichImageNodeView({ editor, node, selected, updateAttributes, deleteNode, getPos }) {
  const imageRef = useRef(null)
  const cleanupResizeRef = useRef(null)

  useEffect(() => () => {
    if (typeof cleanupResizeRef.current === 'function') {
      cleanupResizeRef.current()
    }
  }, [])

  const selectNode = useCallback(() => {
    if (!editor || typeof getPos !== 'function') {
      return
    }

    editor.chain().focus().setNodeSelection(getPos()).run()
  }, [editor, getPos])

  const startResize = useCallback((event) => {
    if (!imageRef.current || event.button !== 0) {
      return
    }

    event.preventDefault()
    event.stopPropagation()
    selectNode()

    const imageElement = imageRef.current
    const parentWidth = imageElement.parentElement?.getBoundingClientRect().width || imageElement.getBoundingClientRect().width || 0
    const startX = event.clientX
    const startWidth = node.attrs.width || Math.round(imageElement.getBoundingClientRect().width) || 0
    const minWidth = 180
    const maxWidth = Math.max(minWidth, Math.round(parentWidth || 1280))

    const handleMove = (moveEvent) => {
      const nextWidth = clamp(Math.round(startWidth + (moveEvent.clientX - startX)), minWidth, maxWidth)
      updateAttributes({ width: nextWidth })
    }

    const handleUp = () => {
      window.removeEventListener('pointermove', handleMove)
      window.removeEventListener('pointerup', handleUp)
      cleanupResizeRef.current = null
    }

    cleanupResizeRef.current = handleUp
    window.addEventListener('pointermove', handleMove)
    window.addEventListener('pointerup', handleUp)
  }, [node.attrs.width, selectNode, updateAttributes])

  const width = Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0
    ? Number(node.attrs.width)
    : null

  return (
    <NodeViewWrapper
      as="figure"
      className={[
        'rich-image-node',
        selected ? 'is-selected' : '',
      ].filter(Boolean).join(' ')}
      data-rich-image="true"
      onMouseDown={(event) => {
        if (event.target instanceof HTMLElement && event.target.closest('input, textarea, button, select, label')) {
          return
        }

        selectNode()
      }}
    >
      <div className="rich-image-node__frame">
        <img
          ref={imageRef}
          src={node.attrs.src}
          alt={node.attrs.alt || ''}
          title={node.attrs.title || ''}
          className="rich-image-node__img"
          style={width ? { width: `${width}px` } : undefined}
        />

        {selected ? (
          <button
            type="button"
            data-drag-handle
            className="rich-image-node__drag-handle"
            title="Drag to move image"
            onMouseDown={selectNode}
          >
            <i className="fa-solid fa-grip-lines" />
          </button>
        ) : null}

        {selected ? (
          <button
            type="button"
            className="rich-image-node__resize-handle"
            title="Resize image"
            onPointerDown={startResize}
          >
            <i className="fa-solid fa-up-right-and-down-left-from-center" />
          </button>
        ) : null}
      </div>

      {!selected && node.attrs.caption ? (
        <figcaption className="rich-image-node__caption">{node.attrs.caption}</figcaption>
      ) : null}

      {selected ? (
        <div className="rich-image-node__editor" contentEditable={false}>
          <div className="grid gap-3 md:grid-cols-2">
            <label className="grid gap-2 text-sm text-slate-300">
              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Alt text</span>
              <input
                value={node.attrs.alt || ''}
                onChange={(event) => updateAttributes({ alt: event.target.value })}
                placeholder="Describe the image for screen readers"
                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
              />
            </label>

            <label className="grid gap-2 text-sm text-slate-300">
              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Caption</span>
              <input
                value={node.attrs.caption || ''}
                onChange={(event) => updateAttributes({ caption: event.target.value })}
                placeholder="Visible caption below the image"
                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
              />
            </label>
          </div>

          <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto] md:items-end">
            <label className="grid gap-2 text-sm text-slate-300">
              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Width</span>
              <input
                type="number"
                min="180"
                max="2400"
                value={width || ''}
                onChange={(event) => {
                  const nextValue = Number.parseInt(event.target.value, 10)
                  updateAttributes({ width: Number.isFinite(nextValue) ? nextValue : null })
                }}
                placeholder="Auto"
                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
              />
            </label>

            <button
              type="button"
              onClick={() => updateAttributes({ width: null })}
              className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
            >
              Fit
            </button>

            <button
              type="button"
              onClick={deleteNode}
              className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15"
            >
              Remove
            </button>
          </div>
        </div>
      ) : null}
    </NodeViewWrapper>
  )
}

const RichImage = Image.extend({
  addOptions() {
    return {
      ...this.parent?.(),
      HTMLAttributes: {
        class: 'rich-image-node',
      },
    }
  },

  addAttributes() {
    return {
      ...this.parent?.(),
      alt: {
        default: '',
      },
      title: {
        default: '',
      },
      caption: {
        default: '',
      },
      width: {
        default: null,
        parseHTML: (element) => parsePixelValue(
          element.getAttribute?.('data-width')
          || element.getAttribute?.('width')
          || element.style?.width
          || '',
        ),
        renderHTML: (attributes) => {
          const width = Number(attributes.width)

          if (!Number.isFinite(width) || width <= 0) {
            return {}
          }

          return {
            'data-width': String(Math.round(width)),
            style: `width:${Math.round(width)}px;max-width:100%;`,
          }
        },
      },
    }
  },

  parseHTML() {
    return [
      {
        tag: 'figure[data-rich-image]',
        getAttrs: (element) => readImageAttrs(element),
      },
      {
        tag: 'img[src]',
        getAttrs: (element) => readImageAttrs(element),
      },
    ]
  },

  renderHTML({ node, HTMLAttributes }) {
    const {
      src: _src,
      alt: _alt,
      title: _title,
      caption: _caption,
      width: _width,
      'data-width': _dataWidth,
      ...figureHTMLAttributes
    } = HTMLAttributes

    const figureAttributes = mergeAttributes(this.options.HTMLAttributes, figureHTMLAttributes, {
      'data-rich-image': 'true',
    })
    const imageAttributes = {
      src: node.attrs.src,
      alt: node.attrs.alt || '',
      title: node.attrs.title || '',
      loading: 'lazy',
      decoding: 'async',
    }

    if (Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0) {
      const width = Math.round(Number(node.attrs.width))
      imageAttributes.style = `width:${width}px;max-width:100%;`
      imageAttributes['data-width'] = String(width)
    }

    const children = [
      ['img', imageAttributes],
    ]

    if (node.attrs.caption) {
      children.push(['figcaption', { class: 'rich-image-node__caption' }, node.attrs.caption])
    }

    return ['figure', figureAttributes, ...children]
  },

  addNodeView() {
    return ReactNodeViewRenderer(RichImageNodeView)
  },
})

export default RichImage