import React, { useCallback, useRef, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import EmojiPickerButton from '../comments/EmojiPickerButton'

function ToolbarButton({ title, onClick, children, className = '' }) {
  return (
    <button
      type="button"
      title={title}
      onMouseDown={(event) => {
        event.preventDefault()
        onClick?.()
      }}
      className={[
        'inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-xs font-semibold text-white/60 transition',
        'hover:bg-white/10 hover:text-white',
        className,
      ].join(' ')}
    >
      {children}
    </button>
  )
}

export default function UploadDescriptionEditor({ id, value, onChange, placeholder, error, rows = 8 }) {
  const [tab, setTab] = useState('write')
  const textareaRef = useRef(null)

  const focusTextarea = useCallback(() => {
    requestAnimationFrame(() => {
      textareaRef.current?.focus()
    })
  }, [])

  const wrapSelection = useCallback((before, after, placeholderText = 'text') => {
    const textarea = textareaRef.current
    if (!textarea) return

    const current = String(value || '')
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const selected = current.slice(start, end)
    const replacement = `${before}${selected || placeholderText}${after}`
    const next = current.slice(0, start) + replacement + current.slice(end)

    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
      if (selected) {
        textarea.selectionStart = start + replacement.length
        textarea.selectionEnd = start + replacement.length
      } else {
        textarea.selectionStart = start + before.length
        textarea.selectionEnd = start + before.length + placeholderText.length
      }
    })
  }, [onChange, value])

  const prefixLines = useCallback((prefix) => {
    const textarea = textareaRef.current
    if (!textarea) return

    const current = String(value || '')
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const selected = current.slice(start, end)
    const fallback = prefix.endsWith('. ') ? `${prefix}item` : `${prefix}item`
    const source = selected || fallback
    const nextBlock = source.split('\n').map((line) => `${prefix}${line}`).join('\n')
    const next = current.slice(0, start) + nextBlock + current.slice(end)

    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
      textarea.selectionStart = start
      textarea.selectionEnd = start + nextBlock.length
    })
  }, [onChange, value])

  const insertLink = useCallback(() => {
    const textarea = textareaRef.current
    if (!textarea) return

    const current = String(value || '')
    const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const selected = current.slice(start, end)
    const replacement = selected && /^https?:\/\//i.test(selected)
      ? `[link](${selected})`
      : `[link](https://)`
    const next = current.slice(0, start) + replacement + current.slice(end)

    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
      if (selected && /^https?:\/\//i.test(selected)) {
        textarea.selectionStart = start + 1
        textarea.selectionEnd = start + 5
      } else {
        const urlStart = start + replacement.indexOf('https://')
        textarea.selectionStart = urlStart
        textarea.selectionEnd = urlStart + 'https://'.length
      }
    })
  }, [onChange, value])

  const insertAtCursor = useCallback((text) => {
    const textarea = textareaRef.current
    if (!textarea) {
      onChange?.(`${String(value || '')}${text}`)
      return
    }

    const current = String(value || '')
    const start = textarea.selectionStart ?? current.length
    const end = textarea.selectionEnd ?? current.length
    const next = current.slice(0, start) + text + current.slice(end)

    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
      textarea.selectionStart = start + text.length
      textarea.selectionEnd = start + text.length
    })
  }, [onChange, value])

  const handleKeyDown = useCallback((event) => {
    const withModifier = event.ctrlKey || event.metaKey
    if (!withModifier) return

    switch (event.key.toLowerCase()) {
      case 'b':
        event.preventDefault()
        wrapSelection('**', '**')
        break
      case 'i':
        event.preventDefault()
        wrapSelection('*', '*')
        break
      case 'k':
        event.preventDefault()
        insertLink()
        break
      case 'e':
        event.preventDefault()
        wrapSelection('`', '`')
        break
      default:
        break
    }
  }, [insertLink, wrapSelection])

  const previewValue = String(value || '').trim()

  return (
    <div className={`overflow-hidden rounded-xl border bg-white/10 ${error ? 'border-red-300/60' : 'border-white/15'}`}>
      <div className="flex items-center justify-between border-b border-white/10 px-2 py-1.5">
        <div className="flex items-center gap-1">
          <button
            type="button"
            onClick={() => setTab('write')}
            className={`rounded-md px-2.5 py-1 text-xs font-medium transition ${tab === 'write' ? 'bg-white/12 text-white' : 'text-white/55 hover:text-white/80'}`}
          >
            Write
          </button>
          <button
            type="button"
            onClick={() => setTab('preview')}
            className={`rounded-md px-2.5 py-1 text-xs font-medium transition ${tab === 'preview' ? 'bg-white/12 text-white' : 'text-white/55 hover:text-white/80'}`}
          >
            Preview
          </button>
        </div>
        <div className="text-[11px] uppercase tracking-[0.16em] text-white/40">
          Safe formatting only
        </div>
      </div>

      {tab === 'write' && (
        <>
          <div className="flex flex-wrap items-center gap-1 border-b border-white/10 px-2 py-1">
            <ToolbarButton title="Bold (Ctrl+B)" onClick={() => wrapSelection('**', '**')}>B</ToolbarButton>
            <ToolbarButton title="Italic (Ctrl+I)" onClick={() => wrapSelection('*', '*')}>I</ToolbarButton>
            <ToolbarButton title="Inline code (Ctrl+E)" onClick={() => wrapSelection('`', '`')}>{'</>'}</ToolbarButton>
            <ToolbarButton title="Link (Ctrl+K)" onClick={insertLink}>Link</ToolbarButton>
            <span className="mx-1 h-4 w-px bg-white/10" aria-hidden="true" />
            <ToolbarButton title="Bulleted list" onClick={() => prefixLines('- ')}>List</ToolbarButton>
            <ToolbarButton title="Numbered list" onClick={() => prefixLines('1. ')}>1.</ToolbarButton>
            <ToolbarButton title="Quote" onClick={() => prefixLines('> ')}>Quote</ToolbarButton>
            <span className="mx-1 h-4 w-px bg-white/10" aria-hidden="true" />
            <EmojiPickerButton onEmojiSelect={insertAtCursor} className="h-8 w-8 rounded-md text-white/60 hover:bg-white/10 hover:text-white" />
          </div>

          <textarea
            id={id}
            ref={textareaRef}
            value={value}
            onChange={(event) => onChange?.(event.target.value)}
            onKeyDown={handleKeyDown}
            rows={rows}
            className="w-full resize-y bg-transparent px-3 py-3 text-sm text-white placeholder-white/45 focus:outline-none"
            placeholder={placeholder}
          />

          <div className="flex flex-wrap items-center justify-between gap-2 px-3 pb-2 text-[11px] text-white/45">
            <span>Supports bold, italic, code, links, lists, quotes, and emoji.</span>
            <button type="button" onClick={focusTextarea} className="text-white/50 transition hover:text-white/80">Continue editing</button>
          </div>
        </>
      )}

      {tab === 'preview' && (
        <div className="min-h-[188px] px-3 py-3">
          {previewValue ? (
            <div className="prose prose-invert prose-sm max-w-none text-white/85 [&_a]:text-sky-300 [&_a]:no-underline hover:[&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-white/20 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-white/10 [&_code]:px-1 [&_code]:py-0.5 [&_ul]:pl-4 [&_ol]:pl-4">
              <ReactMarkdown
                allowedElements={['p', 'strong', 'em', 'a', 'code', 'pre', 'ul', 'ol', 'li', 'blockquote', 'br']}
                unwrapDisallowed
                components={{
                  a: ({ href, children }) => (
                    <a href={href} target="_blank" rel="noopener noreferrer nofollow">{children}</a>
                  ),
                }}
              >
                {previewValue}
              </ReactMarkdown>
            </div>
          ) : (
            <p className="text-sm italic text-white/35">Nothing to preview yet.</p>
          )}
        </div>
      )}
    </div>
  )
}