import React, { useEffect, useMemo, useRef, useState } from 'react'
import { Head, Link, router, useForm } from '@inertiajs/react'
import { createPortal } from 'react-dom'
import AdminLayout from '../../../Layouts/AdminLayout'
import DateTimePicker from '../../../components/ui/DateTimePicker'
import NovaSelect from '../../../components/ui/NovaSelect'
import CourseEditor from './CourseEditor'
import LessonEditor from './LessonEditor'

function normalizePayload(fields, data) {
  const payload = { ...data }

  fields.forEach((field) => {
    if (field.type === 'csv') {
      payload[field.name] = String(payload[field.name] || '')
        .split(/[,\n]/)
        .map((item) => item.trim())
        .filter(Boolean)
    }

    if (field.type === 'json') {
      try {
        payload[field.name] = payload[field.name] ? JSON.parse(payload[field.name]) : {}
      } catch {
        payload[field.name] = {}
      }
    }
  })

  return payload
}

function getField(fields, name) {
  return fields.find((field) => field.name === name) || null
}

function SectionCard({ eyebrow, title, description, children, className = '' }) {
  return (
    <section className={`w-full min-w-0 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_20px_80px_rgba(15,23,42,0.18)] ${className}`.trim()}>
      <div className="mb-5">
        {eyebrow ? <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">{eyebrow}</p> : null}
        <h2 className="mt-2 text-xl font-semibold tracking-[-0.04em] text-white">{title}</h2>
        {description ? <p className="mt-2 text-sm leading-7 text-slate-400">{description}</p> : null}
      </div>
      <div className="grid gap-5">{children}</div>
    </section>
  )
}

function TextField({ label, value, onChange, error, ...rest }) {
  return (
    <label className="grid gap-2 text-sm text-slate-200">
      <span>{label}</span>
      <input value={value ?? ''} onChange={onChange} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" {...rest} />
      {error ? <p className="text-xs text-rose-300">{error}</p> : null}
    </label>
  )
}

function TextAreaField({ label, value, onChange, error, rows = 6, hint }) {
  return (
    <label className="grid gap-2 text-sm text-slate-200">
      <span>{label}</span>
      <textarea value={value ?? ''} onChange={onChange} rows={rows} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm leading-7 text-white outline-none" />
      {hint ? <span className="text-xs leading-5 text-slate-500">{hint}</span> : null}
      {error ? <p className="text-xs text-rose-300">{error}</p> : null}
    </label>
  )
}

function ToggleField({ label, checked, onChange, help, error }) {
  return (
    <label className={`flex cursor-pointer items-start gap-4 rounded-[28px] border px-5 py-4 transition ${checked ? 'border-[#f39a24]/35 bg-[#f39a24]/10' : 'border-white/10 bg-black/20 hover:border-white/20 hover:bg-white/[0.04]'}`}>
      <input type="checkbox" checked={Boolean(checked)} onChange={onChange} className="sr-only" />
      <span className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border text-sm transition ${checked ? 'border-[#f39a24] bg-[#f39a24] text-white' : 'border-white/10 bg-[#151a29] text-transparent'}`}>
        <i className="fa-solid fa-check" />
      </span>
      <span className="min-w-0">
        <span className="block text-base font-semibold tracking-[-0.02em] text-white">{label}</span>
        {help ? <span className="mt-1 block text-sm leading-6 text-slate-300">{help}</span> : null}
        {error ? <span className="mt-2 block text-xs text-rose-300">{error}</span> : null}
      </span>
    </label>
  )
}

const PROMPT_EDITOR_TABS = [
  {
    id: 'overview',
    label: 'Overview',
    description: 'Set the prompt identity, category, access level, and the short summary shown in the library.',
    icon: 'fa-compass-drafting',
    sections: ['prompt-identity'],
  },
  {
    id: 'prompt',
    label: 'Prompt Body',
    description: 'Write the main prompt, exclusions, usage notes, and workflow direction without crowding the rest of the form.',
    icon: 'fa-wand-magic-sparkles',
    sections: ['prompt-body'],
  },
  {
    id: 'comparisons',
    label: 'AI Model Comparisons',
    description: 'Compare how different AI models or providers behave on the same prompt so editors can keep the guidance reusable.',
    icon: 'fa-scale-balanced',
    sections: ['prompt-comparisons'],
  },
  {
    id: 'media',
    label: 'Media',
    description: 'Upload the preview image used across the prompt library and public prompt detail page.',
    icon: 'fa-image',
    sections: ['prompt-media'],
  },
  {
    id: 'publish',
    label: 'Publish',
    description: 'Control timing, SEO, and promotion state without showing every publishing option at once.',
    icon: 'fa-rocket-launch',
    sections: ['prompt-publishing', 'prompt-preview'],
  },
]

const PROMPT_FIELD_TAB_MAP = {
  category_id: 'overview',
  title: 'overview',
  slug: 'overview',
  excerpt: 'overview',
  difficulty: 'overview',
  access_level: 'overview',
  aspect_ratio: 'overview',
  tags: 'overview',
  prompt: 'prompt',
  negative_prompt: 'prompt',
  usage_notes: 'prompt',
  workflow_notes: 'prompt',
  preview_image: 'media',
  preview_image_file: 'media',
  published_at: 'publish',
  seo_title: 'publish',
  seo_description: 'publish',
  featured: 'publish',
  prompt_of_week: 'publish',
  active: 'publish',
}

function slugifyPromptTitle(value) {
  return String(value || '')
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
    .slice(0, 180)
}

function stripPlainText(value) {
  return String(value || '').replace(/\s+/g, ' ').trim()
}

function countPlainWords(value) {
  const text = stripPlainText(value)
  return text ? text.split(/\s+/).length : 0
}

function emptyPromptComparison() {
  return {
    client_key: `comparison-${Math.random().toString(36).slice(2, 10)}`,
    provider: '',
    model_name: '',
    notes: '',
    strengths: '',
    weaknesses: '',
    best_for: '',
    image_path: '',
    image_url: '',
    thumb_path: '',
    thumb_url: '',
    settings: '',
    score: '',
    active: true,
  }
}

function sanitizePromptComparison(value) {
  if (!value || typeof value !== 'object') {
    return emptyPromptComparison()
  }

  return {
    client_key: String(value.client_key || emptyPromptComparison().client_key),
    provider: String(value.provider || '').trim(),
    model_name: String(value.model_name || '').trim(),
    notes: String(value.notes || '').trim(),
    strengths: String(value.strengths || '').trim(),
    weaknesses: String(value.weaknesses || '').trim(),
    best_for: String(value.best_for || '').trim(),
    image_path: String(value.image_path || '').trim(),
    image_url: String(value.image_url || '').trim(),
    thumb_path: String(value.thumb_path || '').trim(),
    thumb_url: String(value.thumb_url || '').trim(),
    settings: String(value.settings || '').trim(),
    score: value.score === '' || value.score === null || typeof value.score === 'undefined' ? '' : String(value.score).trim(),
    active: typeof value.active === 'boolean' ? value.active : true,
  }
}

function normalizePromptComparisons(value, { preserveEmpty = false } = {}) {
  if (!Array.isArray(value)) return []

  return value
    .map((item) => {
      if (typeof item === 'string') {
        const normalized = { ...emptyPromptComparison(), notes: item.trim() }
        return normalized.notes || preserveEmpty ? normalized : null
      }

      if (!item || typeof item !== 'object') return preserveEmpty ? emptyPromptComparison() : null

      const normalized = sanitizePromptComparison(item)

      const hasContent = [
        normalized.provider,
        normalized.model_name,
        normalized.notes,
        normalized.strengths,
        normalized.weaknesses,
        normalized.best_for,
        normalized.image_path,
        normalized.thumb_path,
        normalized.settings,
        normalized.score,
      ].some(Boolean)

      return hasContent || preserveEmpty ? normalized : null
    })
    .filter(Boolean)
}

function serializePromptComparisons(value) {
  return normalizePromptComparisons(value)
    .map((comparison) => ({
      provider: comparison.provider,
      model_name: comparison.model_name,
      notes: comparison.notes,
      strengths: comparison.strengths,
      weaknesses: comparison.weaknesses,
      best_for: comparison.best_for,
      image_path: comparison.image_path,
      thumb_path: comparison.thumb_path,
      settings: comparison.settings,
      score: comparison.score === '' ? null : Number(comparison.score),
      active: Boolean(comparison.active),
    }))
}

function normalizeCodeList(values) {
  return Array.from(new Set((Array.isArray(values) ? values : [])
    .map((value) => String(value || '').trim())
    .filter(Boolean)))
}

function loadCodeList(storageKey) {
  if (typeof window === 'undefined') return []

  try {
    return normalizeCodeList(JSON.parse(window.localStorage.getItem(storageKey) || '[]'))
  } catch {
    return []
  }
}

function saveCodeList(storageKey, values) {
  if (typeof window === 'undefined') return
  window.localStorage.setItem(storageKey, JSON.stringify(normalizeCodeList(values)))
}

function parsePromptImport(rawText, categoryOptions) {
  let parsed

  try {
    parsed = JSON.parse(String(rawText || ''))
  } catch {
    throw new Error('Could not parse JSON.')
  }

  if (!parsed || Array.isArray(parsed) || typeof parsed !== 'object') {
    throw new Error('Import JSON must be an object.')
  }

  const next = {}
  const applied = []

  const apply = (key, value) => {
    next[key] = value
    applied.push(key)
  }

  if (parsed.title != null) apply('title', String(parsed.title))
  if (parsed.slug != null) apply('slug', String(parsed.slug))
  if (parsed.excerpt != null) apply('excerpt', String(parsed.excerpt))
  if (parsed.difficulty != null) apply('difficulty', String(parsed.difficulty))
  if (parsed.access_level != null) apply('access_level', String(parsed.access_level))
  if (parsed.access != null && parsed.access_level == null) apply('access_level', String(parsed.access))
  if (parsed.aspect_ratio != null) apply('aspect_ratio', String(parsed.aspect_ratio))
  if (parsed.tags != null) apply('tags', Array.isArray(parsed.tags) ? parsed.tags.map((tag) => typeof tag === 'string' ? tag : (tag?.name || tag?.label || tag?.title || tag?.slug || '')).filter(Boolean).join(', ') : String(parsed.tags))
  if (parsed.prompt != null) apply('prompt', String(parsed.prompt))
  if (parsed.negative_prompt != null) apply('negative_prompt', String(parsed.negative_prompt))
  if (parsed.usage_notes != null) apply('usage_notes', String(parsed.usage_notes))
  if (parsed.workflow_notes != null) apply('workflow_notes', String(parsed.workflow_notes))
  if (parsed.preview_image != null) apply('preview_image', String(parsed.preview_image))
  if (parsed.preview_image_url != null && parsed.preview_image == null) apply('preview_image', String(parsed.preview_image_url))
  if (parsed.published_at != null) apply('published_at', String(parsed.published_at))
  if (parsed.seo_title != null) apply('seo_title', String(parsed.seo_title))
  if (parsed.seo_description != null) apply('seo_description', String(parsed.seo_description))
  if (parsed.featured != null) apply('featured', Boolean(parsed.featured))
  if (parsed.prompt_of_week != null) apply('prompt_of_week', Boolean(parsed.prompt_of_week))
  if (parsed.active != null) apply('active', Boolean(parsed.active))

  if (parsed.tool_notes != null || parsed.comparisons != null) {
    const comparisonSource = Array.isArray(parsed.tool_notes) ? parsed.tool_notes : (Array.isArray(parsed.comparisons) ? parsed.comparisons : [])
    apply('tool_notes', normalizePromptComparisons(comparisonSource, { preserveEmpty: true }))
  }

  if (parsed.category_id != null || parsed.category_slug != null || parsed.category != null) {
    const requested = String(parsed.category_id ?? parsed.category_slug ?? parsed.category).trim().toLowerCase()
    const match = (Array.isArray(categoryOptions) ? categoryOptions : []).find((option) => [option.id, option.value, option.slug, option.name, option.label]
      .filter((candidate) => candidate != null)
      .map((candidate) => String(candidate).trim().toLowerCase())
      .includes(requested))

    if (match) {
      apply('category_id', String(match.id ?? match.value ?? ''))
    }
  }

  if (applied.length === 0) {
    throw new Error('The JSON did not contain any recognized prompt fields.')
  }

  return { next, applied }
}

function getCsrfToken() {
  if (typeof document === 'undefined') return ''
  return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
}

async function uploadPromptComparisonMedia(uploadUrl, file) {
  const formData = new FormData()
  formData.append('slot', 'body')
  formData.append('image', file)

  const response = await fetch(uploadUrl, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': getCsrfToken(),
      Accept: 'application/json',
    },
    credentials: 'same-origin',
    body: formData,
  })

  const payload = await response.json().catch(() => ({}))

  if (!response.ok) {
    throw new Error(payload?.message || 'Could not upload comparison image right now.')
  }

  return payload
}

async function deletePromptComparisonMedia(deleteUrl, path) {
  if (!deleteUrl || !path) return

  await fetch(deleteUrl, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': getCsrfToken(),
      Accept: 'application/json',
    },
    credentials: 'same-origin',
    body: JSON.stringify({ path }),
  })
}

function CodeListEditor({ title, description, items, customItems, draftValue, setDraftValue, onAdd, onRemove }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
      <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{title}</p>
      <p className="mt-1 text-sm text-slate-300">{description}</p>

      <div className="mt-4 flex flex-wrap gap-2">
        {items.map((item) => {
          const removable = customItems.includes(item)

          return (
            <span key={item} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-white">
              <span>{item}</span>
              {removable ? <button type="button" onClick={() => onRemove(item)} className="text-slate-300 transition hover:text-rose-200"><i className="fa-solid fa-xmark" /></button> : null}
            </span>
          )
        })}
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        <input value={draftValue} onChange={(event) => setDraftValue(event.target.value)} className="min-w-[220px] flex-1 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-white outline-none" placeholder={`Add ${title.toLowerCase().slice(0, -1)}`} />
        <button type="button" onClick={onAdd} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-4 py-2.5 text-sm font-semibold text-sky-100">Add</button>
      </div>
    </div>
  )
}

function PromptJsonImportDialog({ open, value, error, onChange, onClose, onApply }) {
  const backdropRef = useRef(null)
  const [activeImportTab, setActiveImportTab] = useState('input')
  const [copyFeedback, setCopyFeedback] = useState('')

  const importTabs = [
    { id: 'input', label: 'Input', description: 'Paste structured prompt JSON and apply it.' },
    { id: 'structure', label: 'Structure example', description: 'Reference payload for prompt templates.' },
    { id: 'docs', label: 'Documentation', description: 'Field rules and import notes.' },
    { id: 'prompts', label: 'AI prompts', description: 'Prompt templates to generate valid JSON.' },
  ]

  const structureExample = {
    title: 'Peaceful Fantasy Forest Wallpaper',
    slug: 'peaceful-fantasy-forest-wallpaper',
    excerpt: 'Create a calm fantasy forest wallpaper with glowing flowers, soft morning light, and gentle mist.',
    category: 'Academy',
    difficulty: 'beginner',
    access_level: 'free',
    aspect_ratio: '16:9',
    tags: ['wallpaper', 'fantasy', 'forest', 'glowing flowers', 'morning light'],
    prompt: 'Create a calm fantasy forest wallpaper with glowing flowers, soft morning light, gentle mist, and a peaceful magical atmosphere.',
    negative_prompt: 'blurry, muddy lighting, distorted tree trunks, low detail, oversaturated highlights',
    usage_notes: 'Start with the base prompt, then increase atmosphere and foliage density gradually.',
    workflow_notes: 'Good candidate for comparison across ChatGPT, Gemini, and Leonardo image models.',
    preview_image: 'https://files.skinbase.org/prompts/peaceful-fantasy-forest.webp',
    featured: false,
    prompt_of_week: false,
    active: true,
    tool_notes: [
      {
        provider: 'ChatGPT',
        model_name: '4o Image',
        settings: 'High detail, cinematic natural light, 16:9',
        notes: 'Strong mood and color harmony, slightly idealized lighting.',
        strengths: 'Atmosphere, foliage glow, readable composition.',
        weaknesses: 'Can over-soften foreground detail.',
        best_for: 'Wallpaper-style fantasy environments.',
        score: 9,
        active: true,
      },
    ],
  }

  const promptJsonSchemaSummary = `You are generating a Skinbase Academy prompt template JSON object.

Return only valid JSON. No markdown, no commentary, no code fences.

Recommended fields:
- title: string
- slug: SEO-friendly slug
- excerpt: concise summary for cards and search results
- category_id or category/category_slug
- difficulty: beginner|intermediate|advanced|pro
- access_level: free|creator|pro|admin
- aspect_ratio: string like 1:1, 16:9, 3:2
- tags: array of strings or objects with name/title/label/slug
- prompt: main prompt text
- negative_prompt: optional exclusions
- usage_notes: practical usage guidance
- workflow_notes: internal/editorial workflow notes
- preview_image: path or URL
- featured: boolean
- prompt_of_week: boolean
- active: boolean
- published_at: YYYY-MM-DD HH:MM:SS when known
- seo_title, seo_description
- tool_notes: array of model comparison objects

tool_notes object fields:
- provider
- model_name
- settings
- notes
- strengths
- weaknesses
- best_for
- image_path or image_url when available
- score (1-10)
- active boolean

Rules:
- Return one JSON object only.
- Keep excerpt concise and readable in cards.
- Keep tags relevant and production-usable.
- If you include tool_notes, keep them normalized and consistent.`

  const aiPromptExamples = [
    {
      title: 'Prompt template generator',
      prompt: `${promptJsonSchemaSummary}

Create a Skinbase Academy prompt template JSON object from the following creative brief.
- Keep the title concise and catalog-friendly.
- Write a prompt that is immediately usable.
- Write an excerpt that works in cards and search results.
- Add 5 to 12 focused tags.
- Include 2 to 4 tool_notes comparisons when the brief mentions multiple AI providers.

Creative brief:
{{CREATIVE_BRIEF}}`,
    },
    {
      title: 'Provider comparison generator',
      prompt: `${promptJsonSchemaSummary}

Generate a prompt template JSON object for Skinbase Academy.
- Focus on the same core prompt being tested across multiple AI image providers.
- Include tool_notes entries for each provider.
- Each tool_notes item should explain settings, strengths, weaknesses, and best_for in plain production language.
- Return JSON only.

Source notes:
{{MODEL_COMPARISON_NOTES}}`,
    },
    {
      title: 'Prompt migration import',
      prompt: `${promptJsonSchemaSummary}

Convert the following source prompt page into structured Skinbase Academy prompt JSON.
- Preserve the core instruction intent.
- Normalize tags and metadata.
- Convert provider reviews into tool_notes.
- Use category/category_slug when category_id is unknown.
- Return JSON only.

Source content:
{{SOURCE_PROMPT_PAGE}}`,
    },
  ]

  function tabButtonClass(active) {
    return `flex-1 rounded-2xl border px-4 py-3 text-left transition ${active ? 'border-sky-300/25 bg-sky-400/10 text-white' : 'border-white/10 bg-white/[0.03] text-slate-400 hover:border-white/20 hover:bg-white/[0.05] hover:text-slate-200'}`
  }

  const copyText = async (text, label) => {
    try {
      await copyTextToClipboard(String(text))
      setCopyFeedback(`${label} copied`)
      window.setTimeout(() => setCopyFeedback(''), 1800)
    } catch {
      setCopyFeedback('Copy failed')
      window.setTimeout(() => setCopyFeedback(''), 1800)
    }
  }

  useEffect(() => {
    if (!open) return undefined

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        onClose?.()
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [onClose, open])

  if (!open) return null

  return createPortal(
    <div
      ref={backdropRef}
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
      onClick={(event) => {
        if (event.target === backdropRef.current) {
          onClose?.()
        }
      }}
      role="presentation"
    >
      <div role="dialog" aria-modal="true" aria-labelledby="prompt-json-import-title" className="flex h-[min(90vh,780px)] w-full max-w-5xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]">
        <div className="border-b border-white/[0.06] bg-white/[0.02] px-6 py-5">
          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Structured import</p>
          <h3 id="prompt-json-import-title" className="mt-2 text-lg font-semibold text-white">Paste prompt JSON</h3>
          <p className="mt-2 text-sm leading-6 text-white/65">Use this to seed the prompt form from AI output, documentation drafts, or migrated prompt library content.</p>
        </div>

        <div className="border-b border-white/[0.06] px-4 py-4">
          <div className="grid gap-2 md:grid-cols-4">
            {importTabs.map((tab) => (
              <button key={tab.id} type="button" onClick={() => setActiveImportTab(tab.id)} className={tabButtonClass(activeImportTab === tab.id)}>
                <div className="text-sm font-semibold">{tab.label}</div>
                <div className="mt-1 text-xs leading-5 text-current/70">{tab.description}</div>
              </button>
            ))}
          </div>
        </div>

        <div className="nova-scrollbar flex-1 min-h-0 overflow-y-auto px-6 py-5">
          {activeImportTab === 'input' ? (
            <div className="grid h-full min-h-0 gap-5 xl:grid-cols-[minmax(0,1.2fr)_360px]">
              <div className="grid gap-3">
                <textarea
                  value={value}
                  onChange={(event) => onChange?.(event.target.value)}
                  rows={18}
                  placeholder={'{\n  "title": "Peaceful Fantasy Forest Wallpaper",\n  "excerpt": "Short summary...",\n  "prompt": "Main prompt text...",\n  "tool_notes": []\n}'}
                  className="nova-scrollbar w-full rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 font-mono text-sm text-white outline-none placeholder:text-white/30"
                />
                {error ? <div className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">{error}</div> : null}
              </div>

              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4 text-sm text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Recognized keys</div>
                <div className="mt-3 space-y-2 leading-6 text-slate-400">
                  <p>title, slug, excerpt</p>
                  <p>category_id, category, category_slug</p>
                  <p>difficulty, access_level, aspect_ratio</p>
                  <p>tags</p>
                  <p>prompt, negative_prompt</p>
                  <p>usage_notes, workflow_notes</p>
                  <p>preview_image, preview_image_url</p>
                  <p>published_at, seo_title, seo_description</p>
                  <p>featured, prompt_of_week, active</p>
                  <p>tool_notes, comparisons</p>
                </div>
              </div>
            </div>
          ) : null}

          {activeImportTab === 'structure' ? (
            <div className="grid h-full min-h-0 gap-5 xl:grid-cols-[minmax(0,1.2fr)_360px]">
              <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
                <div className="mb-3 flex items-center justify-between gap-3">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Structure example</div>
                  <button type="button" onClick={() => copyText(JSON.stringify(structureExample, null, 2), 'Structure example')} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-white/[0.08]">Copy example</button>
                </div>
                <pre className="nova-scrollbar max-h-[52vh] overflow-auto rounded-[20px] border border-white/10 bg-slate-950/80 p-4 text-xs leading-6 text-slate-200">{JSON.stringify(structureExample, null, 2)}</pre>
              </div>

              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4 text-sm text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Notes</div>
                <div className="mt-3 space-y-3 leading-6 text-slate-400">
                  <p>`tool_notes` can be an array of comparison objects or a simpler array under `comparisons`.</p>
                  <p>`tags` can be strings or objects with `name`, `label`, `title`, or `slug`.</p>
                  <p>`preview_image` accepts either a stored path or an external URL.</p>
                </div>
              </div>
            </div>
          ) : null}

          {activeImportTab === 'docs' ? (
            <div className="grid h-full min-h-0 gap-5 xl:grid-cols-[minmax(0,1.2fr)_360px]">
              <div className="rounded-[24px] border border-white/10 bg-black/20 p-4 text-sm leading-7 text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Field guide</div>
                <div className="mt-3 space-y-3 text-slate-400">
                  <p><strong className="text-slate-200">title</strong> - public prompt name used in the library and detail page.</p>
                  <p><strong className="text-slate-200">excerpt</strong> - short summary for cards, preview blocks, and search results.</p>
                  <p><strong className="text-slate-200">prompt</strong> - the main instruction body shown to creators.</p>
                  <p><strong className="text-slate-200">negative_prompt</strong> - exclusions, defects, or anti-patterns.</p>
                  <p><strong className="text-slate-200">tool_notes</strong> - structured comparison notes for provider/model variants.</p>
                  <p><strong className="text-slate-200">preview_image</strong> - existing asset URL or stored path. File upload still happens separately.</p>
                  <p><strong className="text-slate-200">category_id</strong> is preferred when known. `category` or `category_slug` are used for best-effort matching.</p>
                </div>
              </div>

              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4 text-sm text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Import rules</div>
                <div className="mt-3 space-y-2 leading-6 text-slate-400">
                  <p>Unknown keys are ignored, so broader AI output is safe to paste.</p>
                  <p>Use JSON booleans for featured, prompt_of_week, and active.</p>
                  <p>Use `YYYY-MM-DD HH:MM:SS` for `published_at` when scheduling is needed.</p>
                  <p>Keep comparison rows normalized so provider/model names remain consistent in the frontend.</p>
                </div>
              </div>
            </div>
          ) : null}

          {activeImportTab === 'prompts' ? (
            <div className="grid h-full min-h-0 gap-5 xl:grid-cols-[minmax(0,1.2fr)_360px]">
              <div className="grid gap-4">
                {aiPromptExamples.map((example) => (
                  <div key={example.title} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-200/70">{example.title}</div>
                      <button type="button" onClick={() => copyText(example.prompt, example.title)} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-white/[0.08]">Copy prompt</button>
                    </div>
                    <pre className="nova-scrollbar mt-3 max-h-56 overflow-auto whitespace-pre-wrap rounded-[18px] border border-white/10 bg-slate-950/80 p-4 text-sm leading-6 text-slate-200">{example.prompt}</pre>
                  </div>
                ))}
              </div>

              <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4 text-sm text-slate-300">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Prompt tips</div>
                <div className="mt-3 space-y-2 leading-6 text-slate-400">
                  <p>Tell the model to return JSON only, with no explanation text.</p>
                  <p>Ask for `tool_notes` when you want provider-by-provider comparison output.</p>
                  <p>Tell the model to keep titles and tags production-ready, not overly verbose.</p>
                </div>
              </div>
            </div>
          ) : null}
        </div>

        {copyFeedback ? <div className="px-6 pb-2 text-right text-xs font-medium text-sky-200/80">{copyFeedback}</div> : null}

        <div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
          <button type="button" onClick={() => onClose?.()} className="inline-flex items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition hover:bg-white/[0.08] hover:text-white">Cancel</button>
          <button type="button" onClick={() => onApply?.()} className="inline-flex items-center justify-center rounded-full border border-sky-300/25 bg-sky-400/90 px-4 py-2 text-sm font-semibold text-slate-950 transition hover:brightness-110">Apply JSON</button>
        </div>
      </div>
    </div>,
    document.body,
  )
}

function firstPromptErrorTab(errors) {
  const firstKey = Object.keys(errors || {})[0]
  if (!firstKey) return null
  return PROMPT_FIELD_TAB_MAP[firstKey] || null
}

function promptTabErrorCounts(errors) {
  const counts = {}

  Object.keys(errors || {}).forEach((key) => {
    const tabId = PROMPT_FIELD_TAB_MAP[key]
    if (!tabId) return
    counts[tabId] = Number(counts[tabId] || 0) + 1
  })

  return counts
}

function PromptEditorTabs({ activeTab, onChange, errorCounts }) {
  const activeMeta = PROMPT_EDITOR_TABS.find((tab) => tab.id === activeTab) || PROMPT_EDITOR_TABS[0]

  return (
    <div className="sticky top-4 z-20 rounded-[24px] border border-white/10 bg-[linear-gradient(180deg,rgba(7,11,18,0.92),rgba(5,8,14,0.88))] px-3 py-3 shadow-[0_18px_50px_rgba(2,6,23,0.18)] backdrop-blur">
      <div className="flex flex-wrap items-center gap-2" role="tablist" aria-label="Prompt editor sections">
        {PROMPT_EDITOR_TABS.map((tab) => {
          const isActive = tab.id === activeTab
          const errorCount = Number(errorCounts?.[tab.id] || 0)

          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              aria-selected={isActive}
              aria-controls={`prompt-editor-panel-${tab.id}`}
              id={`prompt-editor-tab-${tab.id}`}
              onClick={() => onChange(tab.id)}
              className={[
                'inline-flex items-center gap-2 rounded-2xl border px-4 py-2.5 text-sm font-semibold transition',
                isActive
                  ? 'border-sky-300/25 bg-sky-300/12 text-sky-100 ring-1 ring-sky-300/20'
                  : 'border-white/10 bg-white/[0.03] text-white/80 hover:border-sky-300/30 hover:bg-sky-300/10 hover:text-white',
              ].join(' ')}
            >
              <i className={`fa-solid ${tab.icon} text-xs`} />
              <span>{tab.label}</span>
              {errorCount > 0 ? <span className="rounded-full border border-rose-300/20 bg-rose-300/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.14em] text-rose-100">{errorCount}</span> : null}
            </button>
          )
        })}
      </div>
      <div className="mt-3 flex flex-wrap items-center justify-between gap-3 px-1">
        <p className="text-sm leading-6 text-slate-400">{activeMeta.description}</p>
        <div className="flex flex-wrap gap-2 text-[11px] uppercase tracking-[0.16em] text-slate-500">
          {activeMeta.sections.map((section) => (
            <span key={section} className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5">{section.replace('prompt-', '').replace(/-/g, ' ')}</span>
          ))}
        </div>
      </div>
    </div>
  )
}

function PromptComparisonEditor({ comparisons, setComparisons, editorContext }) {
  const [busyIndex, setBusyIndex] = useState(null)
  const [uploadError, setUploadError] = useState('')
  const [draftProvider, setDraftProvider] = useState('')
  const [draftModel, setDraftModel] = useState('')
  const [customProviders, setCustomProviders] = useState([])
  const [customModels, setCustomModels] = useState([])
  const providerStorageKey = 'academy.prompt-comparison.providers'
  const modelStorageKey = 'academy.prompt-comparison.models'
  const defaultProviders = normalizeCodeList(editorContext?.comparisonCodeLists?.providers || [])
  const defaultModels = normalizeCodeList(editorContext?.comparisonCodeLists?.models || [])
  const providerOptions = normalizeCodeList([...defaultProviders, ...customProviders, ...comparisons.map((comparison) => comparison.provider)])
    .map((value) => ({ value, label: value }))
  const modelOptions = normalizeCodeList([...defaultModels, ...customModels, ...comparisons.map((comparison) => comparison.model_name)])
    .map((value) => ({ value, label: value }))

  useEffect(() => {
    setCustomProviders(loadCodeList(providerStorageKey))
    setCustomModels(loadCodeList(modelStorageKey))
  }, [])

  const replaceComparison = (index, nextComparison) => {
    setComparisons(comparisons.map((comparison, currentIndex) => currentIndex === index ? sanitizePromptComparison(nextComparison) : comparison))
  }

  const updateComparison = (index, field, value) => {
    replaceComparison(index, { ...comparisons[index], [field]: value })
  }

  const removeStoredMedia = async (comparison) => {
    const deleteUrl = editorContext?.comparisonMediaDeleteUrl || ''
    const imagePaths = [comparison?.image_path, comparison?.thumb_path].filter(Boolean)
    await Promise.all(imagePaths.map((path) => deletePromptComparisonMedia(deleteUrl, path)))
  }

  const removeComparison = async (index) => {
    const comparison = comparisons[index]
    setComparisons(comparisons.filter((_, currentIndex) => currentIndex !== index))

    try {
      await removeStoredMedia(comparison)
    } catch {
      // Ignore cleanup failures; the saved payload still controls final media retention.
    }
  }

  const moveComparison = (index, direction) => {
    const nextIndex = index + direction
    if (nextIndex < 0 || nextIndex >= comparisons.length) return

    const nextComparisons = [...comparisons]
    const [entry] = nextComparisons.splice(index, 1)
    nextComparisons.splice(nextIndex, 0, entry)
    setComparisons(nextComparisons)
  }

  const resolvePreviewUrl = (comparison) => comparison.image_url || comparison.thumb_url || ''

  const addCustomProvider = () => {
    const nextValue = String(draftProvider || '').trim()
    if (!nextValue) return
    const nextItems = normalizeCodeList([...customProviders, nextValue])
    setCustomProviders(nextItems)
    saveCodeList(providerStorageKey, nextItems)
    setDraftProvider('')
  }

  const addCustomModel = () => {
    const nextValue = String(draftModel || '').trim()
    if (!nextValue) return
    const nextItems = normalizeCodeList([...customModels, nextValue])
    setCustomModels(nextItems)
    saveCodeList(modelStorageKey, nextItems)
    setDraftModel('')
  }

  const removeCustomProvider = (value) => {
    const nextItems = customProviders.filter((item) => item !== value)
    setCustomProviders(nextItems)
    saveCodeList(providerStorageKey, nextItems)
  }

  const removeCustomModel = (value) => {
    const nextItems = customModels.filter((item) => item !== value)
    setCustomModels(nextItems)
    saveCodeList(modelStorageKey, nextItems)
  }

  const handleUpload = async (index, file) => {
    const uploadUrl = editorContext?.comparisonMediaUploadUrl || ''
    if (!uploadUrl || !file) return

    setBusyIndex(index)
    setUploadError('')

    const previous = comparisons[index]

    try {
      const uploaded = await uploadPromptComparisonMedia(uploadUrl, file)
      replaceComparison(index, {
        ...previous,
        image_path: uploaded.path || '',
        image_url: uploaded.url || '',
        thumb_path: previous?.thumb_path || '',
        thumb_url: previous?.thumb_url || '',
      })

      if (previous?.image_path && previous.image_path !== uploaded.path) {
        await deletePromptComparisonMedia(editorContext?.comparisonMediaDeleteUrl || '', previous.image_path)
      }

      if (previous?.thumb_path && previous.thumb_path !== uploaded.path) {
        await deletePromptComparisonMedia(editorContext?.comparisonMediaDeleteUrl || '', previous.thumb_path)
      }
    } catch (error) {
      setUploadError(error instanceof Error ? error.message : 'Could not upload comparison image.')
    } finally {
      setBusyIndex(null)
    }
  }

  const clearMedia = async (index) => {
    const comparison = comparisons[index]
    replaceComparison(index, {
      ...comparison,
      image_path: '',
      image_url: '',
      thumb_path: '',
      thumb_url: '',
    })

    try {
      await removeStoredMedia(comparison)
    } catch {
      // Ignore cleanup failures; backend cleanup also runs on save.
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Structured blocks</p>
          <p className="mt-1 text-sm text-slate-300">Upload the generated output for each provider, then document what it does well, where it fails, and which workflow it fits best.</p>
        </div>
        <button type="button" onClick={() => setComparisons([...comparisons, emptyPromptComparison()])} className="rounded-full border border-amber-300/25 bg-amber-300/12 px-4 py-2.5 text-sm font-semibold text-amber-100">+ Add AI Comparison</button>
      </div>

      {uploadError ? <div className="rounded-[20px] border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{uploadError}</div> : null}

      <div className="grid gap-4 xl:grid-cols-2">
        <CodeListEditor
          title="Providers"
          description="Use a short consistent provider name in the dropdown. Add custom ones when a new tool appears."
          items={providerOptions.map((option) => option.value)}
          customItems={customProviders}
          draftValue={draftProvider}
          setDraftValue={setDraftProvider}
          onAdd={addCustomProvider}
          onRemove={removeCustomProvider}
        />
        <CodeListEditor
          title="Models"
          description="Keep model names standardized so frontend comparisons stay readable and sortable."
          items={modelOptions.map((option) => option.value)}
          customItems={customModels}
          draftValue={draftModel}
          setDraftValue={setDraftModel}
          onAdd={addCustomModel}
          onRemove={removeCustomModel}
        />
      </div>

      {comparisons.length ? comparisons.map((comparison, index) => (
        <section key={comparison.client_key || `comparison-${index}`} className="rounded-[28px] border border-white/10 bg-black/20 p-5">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-sky-200/75">AI model comparison</p>
              <h3 className="mt-2 text-lg font-semibold tracking-[-0.03em] text-white">{comparison.model_name || `Comparison ${String(index + 1).padStart(2, '0')}`}</h3>
              <p className="mt-1 text-sm text-slate-400">Document how this model handles the same prompt so creators can choose the right tool faster.</p>
            </div>
            <div className="flex flex-wrap gap-2">
              <button type="button" onClick={() => moveComparison(index, -1)} disabled={index === 0} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold text-white disabled:opacity-40"><i className="fa-solid fa-arrow-up" /></button>
              <button type="button" onClick={() => moveComparison(index, 1)} disabled={index === comparisons.length - 1} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold text-white disabled:opacity-40"><i className="fa-solid fa-arrow-down" /></button>
              <button type="button" onClick={() => removeComparison(index)} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-3 py-2 text-xs font-semibold text-rose-100">Remove</button>
            </div>
          </div>

          <div className="mt-4 grid gap-4 lg:grid-cols-[220px_minmax(0,1fr)]">
            <div className="space-y-3">
              <div className="overflow-hidden rounded-[22px] border border-white/10 bg-slate-950">
                {resolvePreviewUrl(comparison) ? (
                  <img src={resolvePreviewUrl(comparison)} alt={comparison.model_name || comparison.provider || `Comparison ${index + 1}`} className="h-40 w-full object-cover" />
                ) : (
                  <div className="flex h-40 items-center justify-center px-4 text-center text-sm text-slate-500">Upload generated output from this provider</div>
                )}
              </div>

              <div className="grid gap-2">
                <label className="cursor-pointer rounded-full border border-sky-300/25 bg-sky-300/12 px-4 py-2.5 text-center text-sm font-semibold text-sky-100 transition hover:bg-sky-300/18">
                  <input
                    type="file"
                    accept="image/jpeg,image/png,image/webp"
                    className="hidden"
                    disabled={busyIndex === index}
                    onChange={(event) => {
                      const file = event.target.files?.[0] || null
                      if (file) {
                        handleUpload(index, file)
                      }
                      event.target.value = ''
                    }}
                  />
                  {busyIndex === index ? 'Uploading...' : (resolvePreviewUrl(comparison) ? 'Replace image' : 'Upload image')}
                </label>
                {comparison.image_path ? <button type="button" onClick={() => clearMedia(index)} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:bg-white/[0.08]">Clear image</button> : null}
              </div>

              <div className="rounded-[20px] border border-white/10 bg-black/30 px-4 py-3 text-xs leading-6 text-slate-400">
                <div className="font-semibold text-white">Stored asset</div>
                <div className="mt-1 break-all">{comparison.image_path || 'No uploaded comparison image yet.'}</div>
              </div>
            </div>

            <div className="space-y-4">
              <div className="mt-0 grid gap-4 md:grid-cols-2">
                <NovaSelect label="Provider" value={comparison.provider || ''} onChange={(nextValue) => updateComparison(index, 'provider', String(nextValue || ''))} options={providerOptions} searchable className="rounded-2xl bg-black/20" />
                <NovaSelect label="Model" value={comparison.model_name || ''} onChange={(nextValue) => updateComparison(index, 'model_name', String(nextValue || ''))} options={modelOptions} searchable className="rounded-2xl bg-black/20" />
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <TextAreaField label="Generation details" value={comparison.settings} onChange={(event) => updateComparison(index, 'settings', event.target.value)} rows={4} hint="Mention where it was generated, model mode, aspect ratio, or special settings." />
                <TextAreaField label="Notes" value={comparison.notes} onChange={(event) => updateComparison(index, 'notes', event.target.value)} rows={4} hint="How does this provider interpret the prompt overall?" />
              </div>

              <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_140px_180px]">
                <TextAreaField label="Best for" value={comparison.best_for} onChange={(event) => updateComparison(index, 'best_for', event.target.value)} rows={4} hint="What type of creator or output is this model the best fit for?" />
                <TextField label="Score" type="number" min="1" max="10" value={comparison.score} onChange={(event) => updateComparison(index, 'score', event.target.value)} placeholder="1-10" />
                <ToggleField label="Visible on frontend" checked={Boolean(comparison.active)} onChange={(event) => updateComparison(index, 'active', event.target.checked)} help="Turn this off to keep the comparison saved but hidden publicly." />
              </div>
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <TextAreaField label="Strengths" value={comparison.strengths} onChange={(event) => updateComparison(index, 'strengths', event.target.value)} rows={4} hint="What this model consistently does well with the prompt." />
            <TextAreaField label="Weaknesses" value={comparison.weaknesses} onChange={(event) => updateComparison(index, 'weaknesses', event.target.value)} rows={4} hint="What tends to fail or need correction in post-processing." />
          </div>
        </section>
      )) : <div className="rounded-[28px] border border-dashed border-white/10 bg-black/20 px-6 py-8 text-sm text-slate-400">No comparison blocks yet. Add one when the same prompt needs model-specific guidance.</div>}
    </div>
  )
}

function Field({ field, form }) {
  const value = form.data[field.name]

  if (field.type === 'checkbox') {
    return (
      <label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200">
        <input type="checkbox" checked={Boolean(value)} onChange={(event) => form.setData(field.name, event.target.checked)} />
        {field.label}
      </label>
    )
  }

  if (field.type === 'datetime-local') {
    return (
      <DateTimePicker
        label={field.label}
        value={value || ''}
        onChange={(nextValue) => form.setData(field.name, nextValue || '')}
        error={form.errors[field.name]}
        clearable
        className="bg-black/20"
      />
    )
  }

  if (field.type === 'textarea') {
    return (
      <label className="grid gap-2 text-sm text-slate-200">
        <span>{field.label}</span>
        <textarea
          value={value || ''}
          onChange={(event) => form.setData(field.name, event.target.value)}
          rows={field.rows || 6}
          className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm leading-7 text-white outline-none"
        />
        {form.errors[field.name] ? <p className="text-xs text-rose-300">{form.errors[field.name]}</p> : null}
      </label>
    )
  }

  if (field.type === 'select') {
    return (
      <NovaSelect
        label={field.label}
        value={value ?? ''}
        onChange={(nextValue) => form.setData(field.name, nextValue ?? '')}
        options={field.options || []}
        searchable={false}
        className="rounded-2xl bg-black/20"
        error={form.errors[field.name]}
      />
    )
  }

  if (field.type === 'multiselect') {
    return (
      <NovaSelect
        multi
        label={field.label}
        value={value || []}
        onChange={(nextValue) => form.setData(field.name, Array.isArray(nextValue) ? nextValue : [])}
        options={field.options || []}
        className="rounded-2xl bg-black/20"
        error={form.errors[field.name]}
      />
    )
  }

  return (
    <label className="grid gap-2 text-sm text-slate-200">
      <span>{field.label}</span>
      <input
        type={field.type || 'text'}
        value={value ?? ''}
        onChange={(event) => form.setData(field.name, event.target.value)}
        className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none"
      />
      {form.errors[field.name] ? <p className="text-xs text-rose-300">{form.errors[field.name]}</p> : null}
    </label>
  )
}

function PromptPreviewDropzone({ form, previewUrl }) {
  const inputRef = useRef(null)
  const [dragging, setDragging] = useState(false)
  const [localPreviewUrl, setLocalPreviewUrl] = useState('')
  const [selectedFileName, setSelectedFileName] = useState('')

  const previewSrc = localPreviewUrl || previewUrl || form.data.preview_image || ''

  useEffect(() => () => {
    if (localPreviewUrl.startsWith('blob:')) {
      URL.revokeObjectURL(localPreviewUrl)
    }
  }, [localPreviewUrl])

  const setSelectedFile = (file) => {
    if (localPreviewUrl.startsWith('blob:')) {
      URL.revokeObjectURL(localPreviewUrl)
    }

    if (!file) {
      setLocalPreviewUrl('')
      setSelectedFileName('')
      form.setData('preview_image_file', null)
      form.clearErrors('preview_image_file')
      return
    }

    const nextPreviewUrl = URL.createObjectURL(file)
    setLocalPreviewUrl(nextPreviewUrl)
    setSelectedFileName(file.name)
    form.setData('preview_image_file', file)
    form.clearErrors('preview_image_file')
  }

  const clearSelection = () => {
    if (localPreviewUrl.startsWith('blob:')) {
      URL.revokeObjectURL(localPreviewUrl)
    }

    setLocalPreviewUrl('')
    setSelectedFileName('')
    form.setData('preview_image_file', null)
    form.clearErrors('preview_image_file')

    if (inputRef.current) {
      inputRef.current.value = ''
    }
  }

  return (
    <SectionCard
      eyebrow="Visual preview"
      title="Preview image"
      description="Drag an image here or paste a URL. Uploaded files are converted to WebP and stored on Contabo automatically."
    >
      <div
        role="button"
        tabIndex={0}
        onClick={() => inputRef.current?.click()}
        onKeyDown={(event) => {
          if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault()
            inputRef.current?.click()
          }
        }}
        onDragOver={(event) => {
          event.preventDefault()
          setDragging(true)
        }}
        onDragEnter={(event) => {
          event.preventDefault()
          setDragging(true)
        }}
        onDragLeave={(event) => {
          event.preventDefault()
          setDragging(false)
        }}
        onDrop={(event) => {
          event.preventDefault()
          setDragging(false)
          setSelectedFile(event.dataTransfer?.files?.[0] || null)
        }}
        className={[
          'w-full min-w-0 rounded-[28px] border border-dashed p-5 outline-none transition',
          dragging ? 'border-sky-300/50 bg-sky-400/10' : 'border-white/10 bg-black/20 hover:border-white/20 hover:bg-white/[0.04]',
        ].join(' ')}
      >
        <div className="flex flex-col gap-4">
          <div className="flex min-w-0 items-start gap-4">
            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-sky-300/20 bg-sky-400/10 text-sky-100">
              <i className="fa-solid fa-image" />
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-sm font-semibold text-white">Drop a preview image or browse</div>
              <div className="mt-1 text-xs leading-5 text-slate-400">JPG, PNG, or WEBP. The server re-encodes the final asset to WebP before uploading it to the CDN.</div>
              <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-slate-400">
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">JPG</span>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">PNG</span>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">WEBP</span>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">Max 5 MB</span>
              </div>
            </div>
          </div>

          <div className="grid w-full max-w-full gap-3">
            <div className="overflow-hidden rounded-[20px] border border-white/10 bg-slate-950">
              {previewSrc ? (
                <img src={previewSrc} alt="Prompt preview" className="h-40 w-full object-cover" />
              ) : (
                <div className="flex h-40 items-center justify-center px-4 text-center text-sm text-slate-500">No preview image selected</div>
              )}
            </div>
            <div className="flex gap-2">
              <button type="button" onClick={() => inputRef.current?.click()} className="flex-1 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Browse</button>
              {selectedFileName || localPreviewUrl ? <button type="button" onClick={clearSelection} className="rounded-full border border-white/10 bg-transparent px-4 py-2.5 text-sm font-semibold text-slate-300 transition hover:bg-white/[0.04]">Clear</button> : null}
            </div>
          </div>
        </div>

        <input
          ref={inputRef}
          type="file"
          accept="image/jpeg,image/png,image/webp"
          className="hidden"
          onChange={(event) => {
            setSelectedFile(event.target.files?.[0] || null)
            event.target.value = ''
          }}
        />

        <div className="mt-4 grid min-w-0 gap-3 md:grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,220px)]">
          <TextField
            label="Preview image URL fallback"
            value={form.data.preview_image || ''}
            onChange={(event) => form.setData('preview_image', event.target.value)}
            error={form.errors.preview_image}
            placeholder="Paste a URL or leave empty if you upload a file"
          />

          <div className="min-w-0 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-xs leading-6 text-slate-300">
            <div className="font-semibold text-white">Stored value</div>
            <div className="mt-1 break-all text-slate-400">{form.data.preview_image_file?.name || form.data.preview_image || previewUrl || 'None yet'}</div>
          </div>
        </div>

        {form.errors.preview_image_file ? <p className="mt-3 text-sm text-rose-300">{form.errors.preview_image_file}</p> : null}
      </div>
    </SectionCard>
  )
}

function PromptEditor({ title, subtitle, fields, record, submitUrl, indexUrl, destroyUrl, method, editorContext }) {
  const form = useForm({ ...record, new_category_name: '', preview_image_file: null, tool_notes: normalizePromptComparisons(record.tool_notes, { preserveEmpty: true }) })
  const categoryField = useMemo(() => getField(fields, 'category_id'), [fields])
  const difficultyField = useMemo(() => getField(fields, 'difficulty'), [fields])
  const accessField = useMemo(() => getField(fields, 'access_level'), [fields])
  const publishedAtField = useMemo(() => getField(fields, 'published_at'), [fields])
  const featuredField = useMemo(() => getField(fields, 'featured'), [fields])
  const promptOfWeekField = useMemo(() => getField(fields, 'prompt_of_week'), [fields])
  const activeField = useMemo(() => getField(fields, 'active'), [fields])
  const seoDescriptionField = useMemo(() => getField(fields, 'seo_description'), [fields])
  const slugTouchedRef = useRef(Boolean(String(record.slug || '').trim()))
  const [activeTab, setActiveTab] = useState('overview')
  const [jsonImportOpen, setJsonImportOpen] = useState(false)
  const [jsonImportValue, setJsonImportValue] = useState('')
  const [jsonImportError, setJsonImportError] = useState('')
  const previewUrl = form.data.preview_image_url || ''
  const tagCount = String(form.data.tags || '')
    .split(/[,\n]/)
    .map((item) => item.trim())
    .filter(Boolean).length
  const promptWordCount = useMemo(() => countPlainWords(form.data.prompt), [form.data.prompt])
  const negativePromptWordCount = useMemo(() => countPlainWords(form.data.negative_prompt), [form.data.negative_prompt])
  const comparisonCount = Array.isArray(form.data.tool_notes) ? form.data.tool_notes.length : 0
  const tabErrorCounts = useMemo(() => promptTabErrorCounts(form.errors), [form.errors])
  const activeTabMeta = useMemo(() => PROMPT_EDITOR_TABS.find((tab) => tab.id === activeTab) || PROMPT_EDITOR_TABS[0], [activeTab])
  const visibleSections = useMemo(() => new Set(activeTabMeta.sections), [activeTabMeta])
  const sectionClassName = (sectionId, className = '') => `${visibleSections.has(sectionId) ? '' : 'hidden'} ${className}`.trim()
  const editorLinks = editorContext?.links || {}

  useEffect(() => {
    if (slugTouchedRef.current) return
    form.setData('slug', slugifyPromptTitle(form.data.title))
  }, [form, form.data.title])

  useEffect(() => {
    const nextTab = firstPromptErrorTab(form.errors)
    if (!nextTab) return
    setActiveTab(nextTab)
  }, [form.errors])

  const applyJsonImport = () => {
    try {
      const categoryOptions = Array.isArray(categoryField?.options) ? categoryField.options : []
      const parsed = parsePromptImport(jsonImportValue, categoryOptions)

      Object.entries(parsed.next).forEach(([key, value]) => {
        form.setData(key, value)
      })

      if (parsed.next.slug != null) {
        slugTouchedRef.current = true
      }

      setJsonImportError('')
      setJsonImportOpen(false)
    } catch (error) {
      setJsonImportError(error instanceof Error ? error.message : 'Could not parse JSON.')
    }
  }

  const submit = (event) => {
    event.preventDefault()
    const payload = normalizePayload(fields, {
      ...form.data,
      tool_notes: serializePromptComparisons(form.data.tool_notes),
    })
    form.transform(() => payload)

    if (method === 'patch') {
      form.patch(submitUrl)
      return
    }

    form.post(submitUrl)
  }

  return (
    <AdminLayout title={title} subtitle={subtitle}>
      <Head title={`Admin · ${title}`} />

      <form onSubmit={submit} className="space-y-6 pb-16">
        {editorLinks.preview ? (
          <div className="flex flex-wrap gap-3">
            <Link href={editorLinks.preview} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">Preview public page</Link>
          </div>
        ) : null}

        <section className="overflow-hidden rounded-[28px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_34%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.94))] shadow-[0_24px_70px_rgba(2,6,23,0.34)] backdrop-blur">
          <div className="flex flex-wrap items-start justify-between gap-4 border-b border-white/10 px-5 py-4">
            <div className="min-w-0 flex-1">
              <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
                <Link href={indexUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white transition hover:bg-white/[0.08]">Back to prompts</Link>
                <span>{destroyUrl ? 'Edit prompt' : 'New prompt'}</span>
              </div>
              <h1 className="mt-3 text-3xl font-semibold tracking-[-0.05em] text-white">{form.data.title || 'Untitled academy prompt'}</h1>
              <p className="mt-2 max-w-3xl text-sm leading-7 text-slate-300">Keep the prompt editor focused like a production worksheet: identity first, then the actual prompt body, then model comparisons and publishing details in separate tabs.</p>
            </div>
            <div className="flex flex-wrap gap-3">
              <button type="button" onClick={() => setJsonImportOpen(true)} className="rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Import JSON</button>
              <button type="submit" disabled={form.processing} className="rounded-2xl border border-sky-300/25 bg-sky-300/12 px-4 py-2.5 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save prompt'}</button>
            </div>
          </div>
        </section>

        <PromptEditorTabs activeTab={activeTab} onChange={setActiveTab} errorCounts={tabErrorCounts} />

        <section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5 shadow-[0_18px_50px_rgba(2,6,23,0.14)]">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div>
              <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Current workspace</p>
              <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{activeTabMeta.label}</h2>
              <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-400">{activeTabMeta.description}</p>
            </div>
            <div className="grid gap-3 sm:grid-cols-4">
              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3"><div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Prompt words</div><div className="mt-1 text-lg font-semibold text-white">{promptWordCount.toLocaleString()}</div></div>
              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3"><div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Negative words</div><div className="mt-1 text-lg font-semibold text-white">{negativePromptWordCount.toLocaleString()}</div></div>
              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3"><div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Tags</div><div className="mt-1 text-lg font-semibold text-white">{tagCount}</div></div>
              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3"><div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Comparisons</div><div className="mt-1 text-lg font-semibold text-white">{comparisonCount}</div></div>
            </div>
          </div>
        </section>

        <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-start">
          <div className="min-w-0 space-y-6" role="tabpanel" id={`prompt-editor-panel-${activeTab}`} aria-labelledby={`prompt-editor-tab-${activeTab}`}>
            <SectionCard eyebrow="Identity" title="Core prompt details" description="Set the catalog identity first so the prompt is easy to find, sort, and preview." className={sectionClassName('prompt-identity')}>
              <div className="grid gap-4 md:grid-cols-2">
                {categoryField ? <NovaSelect label={categoryField.label} value={form.data.category_id ?? ''} onChange={(nextValue) => {
                  form.setData('category_id', nextValue ?? '')
                  if (nextValue) {
                    form.setData('new_category_name', '')
                  }
                }} options={categoryField.options || []} searchable={false} className="rounded-2xl bg-black/20" error={form.errors.category_id} /> : null}
                <TextField label="Or enter new category" value={form.data.new_category_name || ''} onChange={(event) => form.setData('new_category_name', event.target.value)} error={form.errors.new_category_name} placeholder="New prompt category name" />
                {difficultyField ? <NovaSelect label={difficultyField.label} value={form.data.difficulty ?? ''} onChange={(nextValue) => form.setData('difficulty', nextValue ?? '')} options={difficultyField.options || []} searchable={false} className="rounded-2xl bg-black/20" error={form.errors.difficulty} /> : null}
              </div>

              <div className="rounded-[22px] border border-white/10 bg-black/20 px-4 py-3 text-xs leading-6 text-slate-400">
                Choose an existing category from the dropdown or type a new category name. When you save, a new prompt category will be created automatically and attached to this prompt.
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                {accessField ? <NovaSelect label={accessField.label} value={form.data.access_level ?? ''} onChange={(nextValue) => form.setData('access_level', nextValue ?? '')} options={accessField.options || []} searchable={false} className="rounded-2xl bg-black/20" error={form.errors.access_level} /> : null}
                <TextField label="Aspect ratio" value={form.data.aspect_ratio || ''} onChange={(event) => form.setData('aspect_ratio', event.target.value)} error={form.errors.aspect_ratio} placeholder="1:1, 16:9, 3:2" />
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <TextField label="Title" value={form.data.title || ''} onChange={(event) => form.setData('title', event.target.value)} error={form.errors.title} maxLength={180} />
                <label className="grid gap-2 text-sm text-slate-200">
                  <span className="flex items-center justify-between gap-3">
                    <span>Slug</span>
                    <button type="button" onClick={() => {
                      slugTouchedRef.current = false
                      form.setData('slug', slugifyPromptTitle(form.data.title))
                    }} className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold text-white">Sync</button>
                  </span>
                  <input value={form.data.slug || ''} onChange={(event) => {
                    slugTouchedRef.current = String(event.target.value).trim() !== ''
                    form.setData('slug', event.target.value)
                  }} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none" maxLength={180} placeholder="prompt-template-slug" />
                  {form.errors.slug ? <p className="text-xs text-rose-300">{form.errors.slug}</p> : null}
                </label>
              </div>

              <TextAreaField label="Excerpt" value={form.data.excerpt || ''} onChange={(event) => form.setData('excerpt', event.target.value)} error={form.errors.excerpt} rows={4} hint="Short summary shown in the library and preview cards." />

              <TextField label="Tags" value={form.data.tags || ''} onChange={(event) => form.setData('tags', event.target.value)} error={form.errors.tags} placeholder="wallpaper, cinematic, neon, portrait" />
            </SectionCard>

            <SectionCard eyebrow="Prompt body" title="Prompt instructions" description="Write the instruction stack, guardrails, and workflow notes without cramming publishing settings into the same view." className={sectionClassName('prompt-body')}>
              <TextAreaField label="Prompt" value={form.data.prompt || ''} onChange={(event) => form.setData('prompt', event.target.value)} error={form.errors.prompt} rows={12} hint="This is the main model instruction used by creators." />
              <TextAreaField label="Negative prompt" value={form.data.negative_prompt || ''} onChange={(event) => form.setData('negative_prompt', event.target.value)} error={form.errors.negative_prompt} rows={6} hint="Optional exclusions, artifacts, or anti-patterns to avoid." />
              <div className="grid gap-4 md:grid-cols-2">
                <TextAreaField label="Usage notes" value={form.data.usage_notes || ''} onChange={(event) => form.setData('usage_notes', event.target.value)} error={form.errors.usage_notes} rows={6} hint="Explain how to apply the prompt in a practical workflow." />
                <TextAreaField label="Workflow notes" value={form.data.workflow_notes || ''} onChange={(event) => form.setData('workflow_notes', event.target.value)} error={form.errors.workflow_notes} rows={6} hint="Internal editorial notes, camera settings, or prompt variants." />
              </div>
            </SectionCard>

            <SectionCard eyebrow="Structured blocks" title="AI model comparisons" description="Add reusable same-prompt comparison notes without burying provider-specific behavior inside the main prompt body." className={sectionClassName('prompt-comparisons')}>
              <PromptComparisonEditor comparisons={Array.isArray(form.data.tool_notes) ? form.data.tool_notes : []} setComparisons={(nextValue) => form.setData('tool_notes', normalizePromptComparisons(nextValue, { preserveEmpty: true }))} editorContext={editorContext} />
            </SectionCard>

            <div className={sectionClassName('prompt-media')}>
              <PromptPreviewDropzone form={form} previewUrl={previewUrl} />
            </div>

            <SectionCard eyebrow="Publishing" title="Release controls" description="Choose when the prompt becomes visible and how it behaves in the academy." className={sectionClassName('prompt-publishing')}>
              <div className="grid gap-4 md:grid-cols-2">
                {publishedAtField ? <DateTimePicker label={publishedAtField.label} value={form.data.published_at || ''} onChange={(nextValue) => form.setData('published_at', nextValue || '')} error={form.errors.published_at} clearable className="bg-black/20" /> : null}
                <TextField label="SEO title" value={form.data.seo_title || ''} onChange={(event) => form.setData('seo_title', event.target.value)} error={form.errors.seo_title} maxLength={180} />
              </div>
              {seoDescriptionField ? <TextAreaField label={seoDescriptionField.label} value={form.data.seo_description || ''} onChange={(event) => form.setData('seo_description', event.target.value)} error={form.errors.seo_description} rows={4} /> : null}

              <div className="grid gap-3 md:grid-cols-3">
                {featuredField ? <ToggleField label={featuredField.label} checked={Boolean(form.data.featured)} onChange={(event) => form.setData('featured', event.target.checked)} help="Highlight this prompt in featured rails." error={form.errors.featured} /> : null}
                {promptOfWeekField ? <ToggleField label={promptOfWeekField.label} checked={Boolean(form.data.prompt_of_week)} onChange={(event) => form.setData('prompt_of_week', event.target.checked)} help="Promote this prompt as the current weekly pick." error={form.errors.prompt_of_week} /> : null}
                {activeField ? <ToggleField label={activeField.label} checked={Boolean(form.data.active)} onChange={(event) => form.setData('active', event.target.checked)} help="Keep draft prompts hidden until they are ready." error={form.errors.active} /> : null}
              </div>
            </SectionCard>

            <SectionCard eyebrow="Preview" title="Public-facing snapshot" description="Check the prompt card summary, tags, and current image before publishing." className={sectionClassName('prompt-preview')}>
              <div className="overflow-hidden rounded-[24px] border border-white/10 bg-black/30">
                {previewUrl || form.data.preview_image ? (
                  <img src={previewUrl || form.data.preview_image} alt="Prompt preview" className="h-64 w-full object-cover" />
                ) : (
                  <div className="flex h-64 items-center justify-center px-6 text-center text-sm text-slate-500">No preview image selected yet.</div>
                )}
              </div>

              <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
                <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Prompt summary</p>
                <h3 className="mt-3 text-2xl font-semibold tracking-[-0.04em] text-white">{form.data.title || 'Untitled prompt'}</h3>
                <p className="mt-2 text-sm leading-7 text-slate-400">{form.data.excerpt || 'Add a concise excerpt to give the prompt some context in the library.'}</p>
                <dl className="mt-4 grid grid-cols-2 gap-3 text-xs text-slate-400">
                  <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-3 py-2"><dt className="uppercase tracking-[0.16em] text-slate-500">Difficulty</dt><dd className="mt-1 text-sm text-white">{form.data.difficulty || '—'}</dd></div>
                  <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-3 py-2"><dt className="uppercase tracking-[0.16em] text-slate-500">Access</dt><dd className="mt-1 text-sm text-white">{form.data.access_level || '—'}</dd></div>
                  <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-3 py-2"><dt className="uppercase tracking-[0.16em] text-slate-500">Aspect</dt><dd className="mt-1 text-sm text-white">{form.data.aspect_ratio || '—'}</dd></div>
                  <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-3 py-2"><dt className="uppercase tracking-[0.16em] text-slate-500">Comparisons</dt><dd className="mt-1 text-sm text-white">{comparisonCount}</dd></div>
                </dl>
              </div>
            </SectionCard>
          </div>

          <div className="min-w-0 space-y-6 xl:sticky xl:top-6 xl:self-start">
            <SectionCard eyebrow="At a glance" title="Prompt status" description="A compact summary while you work through the tabs.">
              <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
                <div className="rounded-[22px] border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Prompt words</p><p className="mt-2 text-lg font-semibold text-white">{promptWordCount.toLocaleString()}</p></div>
                <div className="rounded-[22px] border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Tags</p><p className="mt-2 text-lg font-semibold text-white">{tagCount}</p></div>
                <div className="rounded-[22px] border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Comparisons</p><p className="mt-2 text-lg font-semibold text-white">{comparisonCount}</p></div>
                <div className="rounded-[22px] border border-white/10 bg-black/20 px-4 py-4"><p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Visibility</p><p className="mt-2 text-lg font-semibold text-white">{form.data.active ? 'Active' : 'Draft'}</p></div>
              </div>
              <p className="text-xs leading-6 text-slate-500">Uploaded images are converted to WebP and stored on the Contabo S3-backed CDN before the record is saved.</p>
            </SectionCard>
          </div>
        </div>

        <div className="flex flex-wrap gap-3 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
          <button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save prompt'}</button>
          <Link href={indexUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white">Back</Link>
          {destroyUrl ? <button type="button" onClick={() => { if (!window.confirm('Delete this record?')) return; router.delete(destroyUrl) }} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-5 py-3 text-sm font-semibold text-rose-100">Delete</button> : null}
        </div>
      </form>

      <PromptJsonImportDialog
        open={jsonImportOpen}
        value={jsonImportValue}
        error={jsonImportError}
        onChange={setJsonImportValue}
        onClose={() => setJsonImportOpen(false)}
        onApply={applyJsonImport}
      />
    </AdminLayout>
  )
}

function GenericEditor({ title, subtitle, fields, record, submitUrl, indexUrl, destroyUrl, method, editorContext }) {
  const form = useForm(record)
  const editorLinks = editorContext?.links || {}

  const submit = (event) => {
    event.preventDefault()
    const payload = normalizePayload(fields, form.data)
    form.transform(() => payload)

    if (method === 'patch') {
      form.patch(submitUrl)
      return
    }

    form.post(submitUrl)
  }

  return (
    <AdminLayout title={title} subtitle={subtitle}>
      <Head title={`Admin · ${title}`} />

      {(editorLinks.builder || editorLinks.preview) ? (
        <div className="mb-5 flex flex-wrap gap-3">
          {editorLinks.builder ? <Link href={editorLinks.builder} className="rounded-full border border-amber-300/20 bg-amber-300/10 px-5 py-3 text-sm font-semibold text-amber-100">Open builder</Link> : null}
          {editorLinks.preview ? <Link href={editorLinks.preview} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">Preview public page</Link> : null}
        </div>
      ) : null}

      <form onSubmit={submit} className="space-y-5 rounded-[30px] border border-white/[0.08] bg-white/[0.03] p-6">
        <div className="grid gap-5">
          {fields.map((field) => (
            <Field key={field.name} field={field} form={form} />
          ))}
        </div>

        <div className="flex flex-wrap gap-3">
          <button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100">{form.processing ? 'Saving...' : 'Save'}</button>
          <Link href={indexUrl} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white">Back</Link>
          {destroyUrl ? <button type="button" onClick={() => { if (!window.confirm('Delete this record?')) return; router.delete(destroyUrl) }} className="rounded-full border border-rose-300/20 bg-rose-300/10 px-5 py-3 text-sm font-semibold text-rose-100">Delete</button> : null}
        </div>
      </form>
    </AdminLayout>
  )
}

export default function AcademyCrudForm({ resource, title, subtitle, fields, record, submitUrl, indexUrl, destroyUrl, method, editorContext }) {
  if (resource === 'courses') {
    return (
      <CourseEditor
        title={title}
        subtitle={subtitle}
        fields={fields}
        record={record}
        submitUrl={submitUrl}
        indexUrl={indexUrl}
        destroyUrl={destroyUrl}
        method={method}
        editorContext={editorContext}
      />
    )
  }

  if (resource === 'lessons') {
    return (
      <LessonEditor
        title={title}
        subtitle={subtitle}
        fields={fields}
        record={record}
        submitUrl={submitUrl}
        indexUrl={indexUrl}
        destroyUrl={destroyUrl}
        method={method}
        editorContext={editorContext}
      />
    )
  }

  if (resource === 'prompts') {
    return (
      <PromptEditor
        title={title}
        subtitle={subtitle}
        fields={fields}
        record={record}
        submitUrl={submitUrl}
        indexUrl={indexUrl}
        destroyUrl={destroyUrl}
        method={method}
        editorContext={editorContext}
      />
    )
  }

  return (
    <GenericEditor
      title={title}
      subtitle={subtitle}
      fields={fields}
      record={record}
      submitUrl={submitUrl}
      indexUrl={indexUrl}
      destroyUrl={destroyUrl}
      method={method}
      editorContext={editorContext}
    />
  )
}