SkinbaseNova/resources/js/components/upload/UploadSidebar.jsx

import React, { useCallback, useRef, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import TagPicker from '../tags/TagPicker'
import Checkbox from '../../Components/ui/Checkbox'

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

function MarkdownEditor({ id, value, onChange, placeholder, error }) {
  const [tab, setTab] = useState('write')
  const textareaRef = useRef(null)

  const wrapSelection = useCallback((before, after) => {
    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 || 'text') + after
    const next = current.slice(0, start) + replacement + current.slice(end)
    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
      textarea.selectionStart = selected ? start + replacement.length : start + before.length
      textarea.selectionEnd = selected ? start + replacement.length : start + before.length + 4
    })
  }, [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 lines = (selected || '').split('\n')
    const normalized = (lines.length ? lines : ['']).map((line) => `${prefix}${line}`).join('\n')
    const next = current.slice(0, start) + normalized + current.slice(end)
    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
      textarea.selectionStart = start
      textarea.selectionEnd = start + normalized.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})`
      : `[${selected || 'link'}](https://)`
    const next = current.slice(0, start) + replacement + current.slice(end)
    onChange?.(next)

    requestAnimationFrame(() => {
      textarea.focus()
    })
  }, [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])

  return (
    <div className={`mt-2 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>

      {tab === 'write' && (
        <>
          <div className="flex 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="Quote" onClick={() => prefixLines('> ')}>❝</ToolbarButton>
          </div>

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

          <p className="px-3 pb-2 text-[11px] text-white/45">
            Markdown supported · Ctrl+B bold · Ctrl+I italic · Ctrl+K link
          </p>
        </>
      )}

      {tab === 'preview' && (
        <div className="min-h-[132px] px-3 py-2">
          {String(value || '').trim() ? (
            <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>
                  ),
                }}
              >
                {String(value || '')}
              </ReactMarkdown>
            </div>
          ) : (
            <p className="text-sm italic text-white/35">Nothing to preview</p>
          )}
        </div>
      )}
    </div>
  )
}

export default function UploadSidebar({
  title = 'Artwork details',
  description = 'Complete metadata before publishing',
  showHeader = true,
  metadata,
  suggestedTags = [],
  errors = {},
  onChangeTitle,
  onChangeTags,
  onChangeDescription,
  onToggleRights,
}) {
  return (
    <aside className="rounded-2xl border border-white/7 bg-gradient-to-br from-slate-900/55 to-slate-900/35 p-6 shadow-[0_10px_24px_rgba(0,0,0,0.22)] sm:p-7">
      {showHeader && (
        <div className="mb-5 rounded-xl border border-white/8 bg-white/[0.04] p-4">
          <h3 className="text-lg font-semibold text-white">{title}</h3>
          <p className="mt-1 text-sm text-white/65">{description}</p>
        </div>
      )}

      <div className="space-y-5">
        <section className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
          <div className="mb-3">
            <h4 className="text-sm font-semibold text-white">Basics</h4>
            <p className="mt-1 text-xs text-white/60">Add a clear title and short description.</p>
          </div>

          <div className="space-y-4">
            <label className="block">
              <span className="text-sm font-medium text-white/90">Title <span className="text-red-300">*</span></span>
              <input
                id="upload-sidebar-title"
                value={metadata.title}
                onChange={(event) => onChangeTitle?.(event.target.value)}
                className={`mt-2 w-full rounded-xl border bg-white/10 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 ${errors.title ? 'border-red-300/60 focus:ring-red-300/70' : 'border-white/15 focus:ring-sky-300/70'}`}
                placeholder="Give your artwork a clear title"
              />
              {errors.title && <p className="mt-1 text-xs text-red-200">{errors.title}</p>}
            </label>

            <label className="block">
              <span className="text-sm font-medium text-white/90">Description <span className="text-red-300">*</span></span>
              <MarkdownEditor
                id="upload-sidebar-description"
                value={metadata.description}
                onChange={onChangeDescription}
                placeholder="Describe your artwork (Markdown supported)."
                error={errors.description}
              />
              {errors.description && <p className="mt-1 text-xs text-red-200">{errors.description}</p>}
            </label>
          </div>
        </section>

        <section className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
          <div className="mb-3">
            <h4 className="text-sm font-semibold text-white">Tags</h4>
            <p className="mt-1 text-xs text-white/60">Use keywords people would search for. Press Enter, comma, or Tab to add a tag.</p>
          </div>
          <TagPicker
            value={metadata.tags}
            onChange={(nextTags) => onChangeTags?.(nextTags)}
            suggestedTags={suggestedTags}
            maxTags={15}
            searchEndpoint="/api/tags/search"
            popularEndpoint="/api/tags/popular"
            error={errors.tags}
          />
        </section>

        <section className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
          <Checkbox
            id="upload-sidebar-rights"
            checked={Boolean(metadata.rightsAccepted)}
            onChange={(event) => onToggleRights?.(event.target.checked)}
            variant="emerald"
            size={20}
            label="I confirm I own the rights to this content."
            hint="Required before publishing."
            error={errors.rights}
            required
          />
        </section>
      </div>
    </aside>
  )
}