import React, { useEffect, useRef } from 'react'
import { Bold, Italic, Link2, List, ListOrdered } from 'lucide-react'
import MergeTagPicker from './MergeTagPicker'

const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
const isHtml = (s) => /<\/?(p|br|div|ul|ol|li|h[1-6]|strong|em|b|i|u|a|span|blockquote)\b/i.test(s || '')
/** Saved plain text (older forms) shown with its line breaks. */
const toEditorHtml = (value) => (isHtml(value) ? value : escapeHtml(value || '').replace(/\r?\n/g, '<br>'))
/** Editor HTML → stored value ('' when the editor only holds an empty line). */
const fromEditorHtml = (html) => (html.replace(/<br\s*\/?>|&nbsp;|\s|<\/?(p|div)>/gi, '') === '' ? '' : html)

/**
 * Minimal rich text editor (bold, italic, link, lists) for success messages and email bodies. Stores HTML; the
 * server keeps HTML as is (wp_kses_post) and adds line breaks only to plain text. Merge tags insert at the caret.
 */
export default function RichTextEditor({ value, onChange, fields, placeholder = '', allFields = true, minHeight = 140, testId, ariaLabel = 'Message' }) {
  const ref = useRef(null)
  const range = useRef(null)

  // Sync external value changes (opening another item) without moving the caret while typing.
  useEffect(() => {
    const el = ref.current
    if (!el) return
    if (fromEditorHtml(el.innerHTML) !== (value || '') && document.activeElement !== el) el.innerHTML = toEditorHtml(value || '')
  }, [value])

  const emit = () => { if (ref.current) onChange(fromEditorHtml(ref.current.innerHTML)) }
  const saveRange = () => {
    const sel = window.getSelection()
    if (sel && sel.rangeCount && ref.current && ref.current.contains(sel.anchorNode)) range.current = sel.getRangeAt(0).cloneRange()
  }
  const restoreRange = () => {
    const el = ref.current
    if (!el) return
    el.focus()
    const sel = window.getSelection()
    if (range.current && sel) {
      sel.removeAllRanges()
      sel.addRange(range.current)
    } else if (sel) {
      const r = document.createRange()
      r.selectNodeContents(el)
      r.collapse(false)
      sel.removeAllRanges()
      sel.addRange(r)
    }
  }
  const exec = (cmd, arg) => {
    restoreRange()
    document.execCommand(cmd, false, arg)
    saveRange()
    emit()
  }
  const addLink = () => {
    const url = window.prompt('Link URL', 'https://')
    if (url && /^(https?:|mailto:|\/|#|\{)/i.test(url.trim())) exec('createLink', url.trim())
  }

  const tools = [
    { id: 'bold', icon: Bold, label: 'Bold', run: () => exec('bold') },
    { id: 'italic', icon: Italic, label: 'Italic', run: () => exec('italic') },
    { id: 'link', icon: Link2, label: 'Link', run: addLink },
    { id: 'ul', icon: List, label: 'Bulleted list', run: () => exec('insertUnorderedList') },
    { id: 'ol', icon: ListOrdered, label: 'Numbered list', run: () => exec('insertOrderedList') },
  ]

  return (
    <div className="border border-gray-200 rounded-lg bg-white focus-within:ring-2 focus-within:ring-gray-900 focus-within:border-transparent" data-rich-text-editor={testId || ''}>
      <div className="flex items-center justify-between gap-2 px-2 py-1.5 border-b border-gray-100 bg-gray-50/70 rounded-t-lg">
        <div className="flex items-center gap-0.5">
          {tools.map(({ id, icon: Icon, label, run }) => (
            <button
              key={id}
              type="button"
              title={label}
              aria-label={label}
              data-rte-tool={id}
              onMouseDown={(e) => e.preventDefault()}
              onClick={run}
              className="w-7 h-7 rounded-md flex items-center justify-center text-gray-600 hover:text-gray-900 hover:bg-gray-200/70 cursor-pointer"
            >
              <Icon className="w-3.5 h-3.5" aria-hidden="true" />
            </button>
          ))}
        </div>
        {fields && (
          <MergeTagPicker
            fields={fields}
            allFields={allFields}
            testId={testId ? `${testId}-tags` : undefined}
            onInsert={(tag) => exec('insertText', tag)}
          />
        )}
      </div>
      <div
        ref={ref}
        role="textbox"
        aria-multiline="true"
        aria-label={ariaLabel}
        contentEditable
        suppressContentEditableWarning
        data-placeholder={placeholder}
        data-testid={testId}
        onInput={() => { saveRange(); emit() }}
        onKeyUp={saveRange}
        onMouseUp={saveRange}
        onBlur={() => { saveRange(); emit() }}
        onPaste={(e) => {
          // Paste as plain text: no foreign markup in emails.
          e.preventDefault()
          document.execCommand('insertText', false, e.clipboardData.getData('text/plain'))
        }}
        className="wpvfb-rte px-3 py-2 text-sm text-gray-900 focus:outline-none overflow-y-auto [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_a]:text-blue-600 [&_a]:underline"
        style={{ minHeight, maxHeight: 360 }}
      />
    </div>
  )
}