import React from 'react'
import { Head, usePage } from '@inertiajs/react'
import Checkbox from '../../components/ui/Checkbox'
import DateTimePicker from '../../components/ui/DateTimePicker'
import NovaSelect from '../../components/ui/NovaSelect'

const FILTER_OPTIONS = [
  { value: 'all', label: 'All rows' },
  { value: 'winner', label: 'Winner' },
  { value: 'active', label: 'Active' },
  { value: 'eligible', label: 'Eligible' },
  { value: 'attention', label: 'Needs attention' },
  { value: 'ineligible', label: 'Ineligible' },
  { value: 'expired', label: 'Expired' },
  { value: 'inactive', label: 'Inactive' },
]

const SORT_OPTIONS = [
  { value: 'priority', label: 'Priority' },
  { value: 'featured_at', label: 'Featured Since' },
  { value: 'expires_at', label: 'Expires' },
  { value: 'score_30d', label: 'Medal Score (30d)' },
]

const PRIORITY_PRESETS = [60, 100, 180, 260, 340]
const PAGE_SIZE = 24

function cn(...values) {
  return values.filter(Boolean).join(' ')
}

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

async function requestJson(url, { method = 'POST', body } = {}) {
  const response = await fetch(url, {
    method,
    credentials: 'same-origin',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': getCsrfToken(),
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: body ? JSON.stringify(body) : undefined,
  })

  const payload = await response.json().catch(() => ({}))
  if (!response.ok) {
    throw new Error(payload?.message || payload?.errors?.artwork_id?.[0] || payload?.errors?.is_active?.[0] || payload?.errors?.force_hero?.[0] || 'Request failed.')
  }

  return payload
}

function isoToLocalInput(value) {
  if (!value) return ''

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return ''

  const local = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
  return local.toISOString().slice(0, 16)
}

function localInputToIso(value) {
  if (!value) return null

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return null

  return date.toISOString()
}

function formatDateTime(value) {
  if (!value) return '—'

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '—'

  return new Intl.DateTimeFormat('en', {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(date)
}

function formatShortDate(value) {
  if (!value) return 'No expiry'

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return 'No expiry'

  return new Intl.DateTimeFormat('en', {
    month: 'short',
    day: 'numeric',
  }).format(date)
}

function formatRelativeExpiry(value) {
  if (!value) return 'No expiry'

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return 'No expiry'

  const now = new Date()
  const diffInDays = Math.ceil((date.getTime() - now.getTime()) / 86400000)

  if (diffInDays < 0) return `${Math.abs(diffInDays)}d overdue`
  if (diffInDays === 0) return 'Due today'
  if (diffInDays === 1) return 'Due tomorrow'
  return `${diffInDays}d left`
}

function formatOwner(entry) {
  if (!entry?.artwork?.owner) return 'Unknown artist'
  if (entry.artwork.owner.type === 'group') return `${entry.artwork.owner.display_name || 'Unknown'} · Group publisher`
  return `${entry.artwork.owner.display_name || 'Unknown'} · @${entry.artwork.owner.username || ''}`
}

function compareWinnerOrder(left, right) {
  if (Boolean(left?.is_force_hero) !== Boolean(right?.is_force_hero)) {
    return Boolean(right?.is_force_hero) - Boolean(left?.is_force_hero)
  }

  const priorityDiff = Number(right?.priority || 0) - Number(left?.priority || 0)
  if (priorityDiff !== 0) return priorityDiff

  const scoreDiff = Number(right?.medals?.score_30d || 0) - Number(left?.medals?.score_30d || 0)
  if (scoreDiff !== 0) return scoreDiff

  const featuredDiff = (new Date(right?.featured_at || 0).getTime() || 0) - (new Date(left?.featured_at || 0).getTime() || 0)
  if (featuredDiff !== 0) return featuredDiff

  const publishedDiff = (new Date(right?.artwork?.published_at || 0).getTime() || 0) - (new Date(left?.artwork?.published_at || 0).getTime() || 0)
  if (publishedDiff !== 0) return publishedDiff

  return Number(right?.id || 0) - Number(left?.id || 0)
}

function compareEntries(left, right, sortKey, direction) {
  const dir = direction === 'asc' ? 1 : -1

  const value = (entry) => {
    switch (sortKey) {
      case 'featured_at':
        return new Date(entry.featured_at || 0).getTime() || 0
      case 'expires_at':
        return new Date(entry.expires_at || 0).getTime() || 0
      case 'score_30d':
        return Number(entry.medals?.score_30d || 0)
      default:
        return Number(entry.priority || 0)
    }
  }

  const leftValue = value(left)
  const rightValue = value(right)
  if (leftValue !== rightValue) {
    return (leftValue > rightValue ? 1 : -1) * dir
  }

  return compareWinnerOrder(left, right)
}

function buildEntrySummary(entry) {
  if (entry?.is_force_hero) {
    return 'Force Hero is enabled, so this row overrides the normal homepage winner order until editors switch it off.'
  }

  if (entry?.is_winner && entry?.winner_reason) {
    return entry.winner_reason
  }

  if (!entry?.is_active) {
    return 'Inactive rows stay visible for planning and editing, but they cannot win the homepage slot.'
  }

  if (entry?.is_expired) {
    return 'This featured slot has expired and is excluded from the live homepage rotation.'
  }

  if (!entry?.eligibility?.is_eligible) {
    const reasons = Array.isArray(entry?.eligibility?.reasons) && entry.eligibility.reasons.length > 0
      ? entry.eligibility.reasons.join(', ')
      : 'Eligibility checks failed.'

    return `Currently blocked from winning: ${reasons}`
  }

  return 'Eligible and in the active selection pool. Priority leads first, then medal score, featured time, and publish date.'
}

function Badge({ label, tone = 'slate' }) {
  const toneClasses = {
    slate: 'border-white/10 bg-white/[0.07] text-slate-100',
    sky: 'border-sky-300/20 bg-sky-400/15 text-sky-100',
    emerald: 'border-emerald-300/20 bg-emerald-400/15 text-emerald-100',
    amber: 'border-amber-300/20 bg-amber-400/15 text-amber-100',
    rose: 'border-rose-300/20 bg-rose-400/15 text-rose-100',
  }

  return (
    <span className={cn('inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]', toneClasses[tone] || toneClasses.slate)}>
      {label}
    </span>
  )
}

function Field({ label, help, children }) {
  return (
    <label className="block space-y-2">
      <span className="text-sm font-semibold text-white">{label}</span>
      {children}
      {help ? <span className="block text-xs leading-relaxed text-slate-400">{help}</span> : null}
    </label>
  )
}

function NoticeBanner({ notice }) {
  if (!notice?.message) return null

  const toneClasses = {
    success: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-50',
    error: 'border-rose-300/20 bg-rose-400/10 text-rose-50',
    info: 'border-sky-300/20 bg-sky-400/10 text-sky-50',
  }

  return (
    <div className={cn('rounded-[22px] border px-4 py-3 text-sm leading-6 shadow-[0_10px_30px_rgba(2,6,23,0.18)]', toneClasses[notice.tone] || toneClasses.info)}>
      {notice.message}
    </div>
  )
}

function StatCard({ label, value, detail, tone = 'sky' }) {
  const toneClasses = {
    sky: 'border-sky-300/15 bg-sky-400/10 text-sky-100',
    amber: 'border-amber-300/15 bg-amber-400/10 text-amber-100',
    emerald: 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100',
    rose: 'border-rose-300/15 bg-rose-400/10 text-rose-100',
  }

  return (
    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 backdrop-blur-sm">
      <div className={cn('inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]', toneClasses[tone] || toneClasses.sky)}>{label}</div>
      <div className="mt-4 text-3xl font-semibold tracking-[-0.05em] text-white">{value}</div>
      {detail ? <div className="mt-2 text-sm leading-6 text-slate-400">{detail}</div> : null}
    </div>
  )
}

function MetricTile({ label, value, hint }) {
  return (
    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
      <div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">{label}</div>
      <div className="mt-2 text-base font-semibold text-white">{value}</div>
      {hint ? <div className="mt-1 text-xs leading-5 text-slate-400">{hint}</div> : null}
    </div>
  )
}

function DockButton({ label, detail, tone = 'sky', onClick }) {
  const toneClasses = {
    sky: 'border-sky-300/25 bg-sky-400/12 text-sky-50',
    amber: 'border-amber-300/25 bg-amber-400/12 text-amber-50',
    slate: 'border-white/10 bg-white/[0.05] text-slate-100',
  }

  return (
    <button
      type="button"
      onClick={onClick}
      className={cn('flex min-w-0 flex-1 flex-col rounded-[20px] border px-4 py-3 text-left shadow-[0_14px_30px_rgba(2,6,23,0.24)] backdrop-blur-sm', toneClasses[tone] || toneClasses.sky)}
    >
      <span className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">{label}</span>
      <span className="mt-1 truncate text-sm font-semibold">{detail}</span>
    </button>
  )
}

function FilterChip({ label, value, active, onClick, count }) {
  return (
    <button
      type="button"
      onClick={() => onClick(value)}
      className={cn(
        'inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] transition',
        active
          ? 'border-sky-300/40 bg-sky-400/15 text-sky-50 shadow-[0_10px_30px_rgba(56,189,248,0.16)]'
          : 'border-white/10 bg-white/[0.03] text-slate-300 hover:border-white/20 hover:bg-white/[0.06]'
      )}
    >
      <span>{label}</span>
      <span className="rounded-full bg-black/20 px-2 py-0.5 text-[10px] text-slate-200">{count}</span>
    </button>
  )
}

function emptyForm() {
  return {
    artwork_id: '',
    priority: 100,
    featured_at: isoToLocalInput(new Date().toISOString()),
    expires_at: '',
    is_active: true,
  }
}

function mapEntryToCandidate(entry) {
  if (!entry) return null

  return {
    ...entry.artwork,
    medals: entry.medals,
    eligibility: entry.eligibility,
    existing_feature_count: entry.duplicate_count,
    already_featured: entry.duplicate_count > 0,
  }
}

export default function FeaturedArtworksAdmin() {
  const { props } = usePage()
  const composerRef = React.useRef(null)
  const rosterRef = React.useRef(null)
  const loadMoreRef = React.useRef(null)
  const endpoints = props.endpoints || {}
  const capabilities = props.capabilities || {}
  const seo = props.seo || {}

  const [entries, setEntries] = React.useState(Array.isArray(props.entries) ? props.entries : [])
  const [winner, setWinner] = React.useState(props.winner || null)
  const [stats, setStats] = React.useState(props.stats || {})
  const [notice, setNotice] = React.useState(null)
  const [busy, setBusy] = React.useState('')
  const [filter, setFilter] = React.useState('all')
  const [sortKey, setSortKey] = React.useState('priority')
  const [sortDirection, setSortDirection] = React.useState('desc')
  const [listQuery, setListQuery] = React.useState('')
  const deferredListQuery = React.useDeferredValue(listQuery)
  const [searchQuery, setSearchQuery] = React.useState('')
  const [searchResults, setSearchResults] = React.useState([])
  const [selectedArtwork, setSelectedArtwork] = React.useState(null)
  const [editingId, setEditingId] = React.useState(null)
  const [form, setForm] = React.useState(emptyForm())
  const [visibleCount, setVisibleCount] = React.useState(PAGE_SIZE)

  React.useEffect(() => {
    setEntries(Array.isArray(props.entries) ? props.entries : [])
    setWinner(props.winner || null)
    setStats(props.stats || {})
  }, [props.entries, props.stats, props.winner])

  React.useEffect(() => {
    setVisibleCount(PAGE_SIZE)
  }, [deferredListQuery, filter, sortDirection, sortKey])

  function scrollToSection(ref) {
    ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }

  function scrollToTop() {
    if (typeof window !== 'undefined') {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }

  function syncPayload(payload) {
    setEntries(Array.isArray(payload.entries) ? payload.entries : [])
    setWinner(payload.winner || null)
    setStats(payload.stats || {})
    if (payload.message) {
      setNotice({ tone: 'success', message: payload.message })
    }
  }

  function resetEditor() {
    setEditingId(null)
    setSelectedArtwork(null)
    setSearchResults([])
    setSearchQuery('')
    setForm(emptyForm())
  }

  async function handleArtworkSearch(event) {
    event.preventDefault()
    if (!searchQuery.trim()) {
      setSearchResults([])
      return
    }

    setBusy('search')
    setNotice(null)

    try {
      const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
      const payload = await requestJson(url, { method: 'GET' })
      const results = Array.isArray(payload.results) ? payload.results : []
      setSearchResults(results)

      if (results.length === 0) {
        setNotice({ tone: 'info', message: 'No artworks matched that search.' })
      }
    } catch (error) {
      setNotice({ tone: 'error', message: error.message || 'Artwork search failed.' })
    } finally {
      setBusy('')
    }
  }

  function chooseArtwork(artwork) {
    setSelectedArtwork(artwork)
    setForm((current) => ({
      ...current,
      artwork_id: artwork.id,
    }))
  }

  function editEntry(entry) {
    setEditingId(entry.id)
    setSelectedArtwork(mapEntryToCandidate(entry))
    setSearchResults([])
    setSearchQuery('')
    setForm({
      artwork_id: entry.artwork_id,
      priority: entry.priority,
      featured_at: isoToLocalInput(entry.featured_at),
      expires_at: isoToLocalInput(entry.expires_at),
      is_active: Boolean(entry.is_active),
    })

    scrollToSection(composerRef)
  }

  async function handleSubmit(event) {
    event.preventDefault()
    if (!editingId && !form.artwork_id) {
      setNotice({ tone: 'error', message: 'Select an artwork first.' })
      return
    }

    setBusy('submit')
    setNotice(null)

    try {
      const payload = await requestJson(
        editingId
          ? endpoints.updatePattern.replace('__FEATURE__', String(editingId))
          : endpoints.store,
        {
          method: editingId ? 'PATCH' : 'POST',
          body: {
            artwork_id: Number(form.artwork_id),
            priority: Number(form.priority || 0),
            featured_at: localInputToIso(form.featured_at),
            expires_at: localInputToIso(form.expires_at),
            is_active: Boolean(form.is_active),
          },
        },
      )

      syncPayload(payload)
      resetEditor()
    } catch (error) {
      setNotice({ tone: 'error', message: error.message || 'Failed to save this featured entry.' })
    } finally {
      setBusy('')
    }
  }

  async function handleToggle(entry) {
    setBusy(`toggle-${entry.id}`)
    setNotice(null)

    try {
      const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
        method: 'PATCH',
      })
      syncPayload(payload)
    } catch (error) {
      setNotice({ tone: 'error', message: error.message || 'Failed to change active state.' })
    } finally {
      setBusy('')
    }
  }

  async function handleDelete(entry) {
    if (typeof window !== 'undefined' && !window.confirm(`Delete featured entry #${entry.id}?`)) {
      return
    }

    setBusy(`delete-${entry.id}`)
    setNotice(null)

    try {
      const payload = await requestJson(endpoints.destroyPattern.replace('__FEATURE__', String(entry.id)), {
        method: 'DELETE',
      })
      syncPayload(payload)

      if (editingId === entry.id) {
        resetEditor()
      }
    } catch (error) {
      setNotice({ tone: 'error', message: error.message || 'Failed to delete this featured entry.' })
    } finally {
      setBusy('')
    }
  }

  async function handleForceHero(entry) {
    setBusy(`force-${entry.id}`)
    setNotice(null)

    try {
      const payload = await requestJson(endpoints.forceHeroPattern.replace('__FEATURE__', String(entry.id)), {
        method: 'PATCH',
      })
      syncPayload(payload)
    } catch (error) {
      setNotice({ tone: 'error', message: error.message || 'Failed to change force hero state.' })
    } finally {
      setBusy('')
    }
  }

  const duplicateSelection = !editingId && selectedArtwork?.already_featured
  const suggestedPriority = winner ? Number(winner.priority || 0) + 20 : 120

  const filterCounts = React.useMemo(() => ({
    all: entries.length,
    winner: entries.filter((entry) => Boolean(entry.is_winner)).length,
    active: entries.filter((entry) => Boolean(entry.is_active)).length,
    eligible: entries.filter((entry) => Boolean(entry.eligibility?.is_eligible)).length,
    attention: entries.filter((entry) => Boolean(entry.is_active) && (Boolean(entry.is_expired) || !entry.eligibility?.is_eligible)).length,
    ineligible: entries.filter((entry) => !entry.eligibility?.is_eligible).length,
    expired: entries.filter((entry) => Boolean(entry.is_expired)).length,
    inactive: entries.filter((entry) => !entry.is_active).length,
  }), [entries])

  const activeForceHeroEntry = React.useMemo(() => entries.find((entry) => Boolean(entry.is_force_hero)) || null, [entries])

  const soonExpiringEntries = React.useMemo(() => {
    const now = Date.now()
    const cutoff = now + (7 * 86400000)

    return entries
      .filter((entry) => {
        if (!entry.expires_at || entry.is_expired) return false
        const expiresAt = new Date(entry.expires_at).getTime()
        return !Number.isNaN(expiresAt) && expiresAt >= now && expiresAt <= cutoff
      })
      .sort((left, right) => (new Date(left.expires_at).getTime() || 0) - (new Date(right.expires_at).getTime() || 0))
  }, [entries])

  const naturalFallback = React.useMemo(() => {
    return [...entries]
      .filter((entry) => Boolean(entry.is_active) && !Boolean(entry.is_expired) && Boolean(entry.eligibility?.is_eligible) && !Boolean(entry.is_winner))
      .sort(compareWinnerOrder)[0] || null
  }, [entries])

  const attentionEntries = React.useMemo(() => {
    return [...entries]
      .filter((entry) => Boolean(entry.is_active) && (Boolean(entry.is_expired) || !entry.eligibility?.is_eligible))
      .sort(compareWinnerOrder)
      .slice(0, 3)
  }, [entries])

  const selectedArtworkSignals = React.useMemo(() => {
    if (!selectedArtwork) return []

    const signals = []
    const eligibilityReasons = Array.isArray(selectedArtwork.eligibility?.reasons) ? selectedArtwork.eligibility.reasons : []

    signals.push({
      label: selectedArtwork.eligibility?.is_eligible ? 'Ready for rotation now' : 'Needs editorial attention',
      tone: selectedArtwork.eligibility?.is_eligible ? 'emerald' : 'rose',
      detail: selectedArtwork.eligibility?.is_eligible
        ? 'Current eligibility checks pass.'
        : eligibilityReasons.join(', ') || 'Eligibility checks are failing.',
    })

    if (winner) {
      const priorityGap = Number(form.priority || 0) - Number(winner.priority || 0)
      signals.push({
        label: priorityGap >= 0 ? 'Priority matches or exceeds current winner' : 'Lower priority than current winner',
        tone: priorityGap >= 0 ? 'sky' : 'amber',
        detail: `Current winner priority: ${winner.priority}. Proposed priority: ${Number(form.priority || 0)}.`,
      })
    }

    if (selectedArtwork.already_featured) {
      signals.push({
        label: 'Existing featured row found',
        tone: 'amber',
        detail: `This artwork already appears in ${selectedArtwork.existing_feature_count || 1} featured row${selectedArtwork.existing_feature_count === 1 ? '' : 's'}.`,
      })
    }

    return signals
  }, [form.priority, selectedArtwork, winner])

  const filteredEntries = React.useMemo(() => {
    const query = deferredListQuery.trim().toLowerCase()

    return [...entries]
      .filter((entry) => {
        if (filter === 'active') return Boolean(entry.is_active)
        if (filter === 'inactive') return !entry.is_active
        if (filter === 'expired') return Boolean(entry.is_expired)
        if (filter === 'winner') return Boolean(entry.is_winner)
        if (filter === 'eligible') return Boolean(entry.eligibility?.is_eligible)
        if (filter === 'ineligible') return !entry.eligibility?.is_eligible
        if (filter === 'attention') return Boolean(entry.is_active) && (Boolean(entry.is_expired) || !entry.eligibility?.is_eligible)
        return true
      })
      .filter((entry) => {
        if (!query) return true

        const haystack = [
          entry.artwork?.title,
          entry.artwork?.owner?.display_name,
          entry.artwork?.owner?.username,
          entry.artwork?.id,
          entry.id,
        ].join(' ').toLowerCase()

        return haystack.includes(query)
      })
      .sort((left, right) => compareEntries(left, right, sortKey, sortDirection))
  }, [deferredListQuery, entries, filter, sortDirection, sortKey])

  const visibleEntries = React.useMemo(() => filteredEntries.slice(0, visibleCount), [filteredEntries, visibleCount])
  const hasMoreEntries = visibleEntries.length < filteredEntries.length

  React.useEffect(() => {
    if (!hasMoreEntries || typeof IntersectionObserver === 'undefined' || !loadMoreRef.current) {
      return undefined
    }

    const observer = new IntersectionObserver((observerEntries) => {
      if (observerEntries.some((observerEntry) => observerEntry.isIntersecting)) {
        setVisibleCount((current) => Math.min(current + PAGE_SIZE, filteredEntries.length))
      }
    }, { rootMargin: '320px 0px' })

    observer.observe(loadMoreRef.current)

    return () => observer.disconnect()
  }, [filteredEntries.length, hasMoreEntries, visibleCount])

  function loadMoreEntries() {
    setVisibleCount((current) => Math.min(current + PAGE_SIZE, filteredEntries.length))
  }

  return (
    <>
      <Head>
        <title>{seo.title || 'Featured Artworks'}</title>
        {seo.description ? <meta name="description" content={seo.description} /> : null}
        {seo.robots ? <meta name="robots" content={seo.robots} /> : null}
        {seo.canonical ? <link rel="canonical" href={seo.canonical} /> : null}
      </Head>

      <div className="min-h-screen bg-[#07111c] pb-28 text-white xl:pb-0">
        <div>
          <div className="flex w-full max-w-none flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8 2xl:px-10">
            <section className="overflow-hidden rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(245,158,11,0.14),_transparent_35%),linear-gradient(180deg,_rgba(6,14,25,0.92),_rgba(8,18,32,0.96))] p-8 shadow-[0_28px_90px_rgba(2,6,23,0.45)]">
              <div className="flex flex-col gap-8 xl:flex-row xl:items-start xl:justify-between">
                <div className="max-w-3xl">
                  <div className="inline-flex rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">Featured Artworks</div>
                  <h1 className="mt-4 text-4xl font-semibold tracking-[-0.06em] text-white sm:text-5xl">Curate the homepage with live winner context, not guesswork.</h1>
                  <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">This workspace now behaves like an editorial command center: current winner visibility, natural fallback awareness, faster filters, and a cleaner composer for new or existing featured rows.</p>
                  <div className="mt-6 flex flex-wrap gap-3">
                    <button type="button" onClick={() => scrollToSection(composerRef)} className="rounded-full bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100">
                      Add or edit featured row
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        React.startTransition(() => setFilter('attention'))
                        scrollToSection(rosterRef)
                      }}
                      className="rounded-full border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/[0.06]"
                    >
                      Review attention items
                    </button>
                    {winner?.artwork?.canonical_url ? (
                      <a href={winner.artwork.canonical_url} target="_blank" rel="noreferrer" className="rounded-full border border-amber-300/20 px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-300/40 hover:bg-amber-400/10">
                        Open current winner
                      </a>
                    ) : null}
                  </div>
                </div>

                <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
                  <StatCard label="Active pool" value={stats.active || 0} detail="Rows currently allowed to compete for the homepage slot." tone="sky" />
                  <StatCard label="Eligible now" value={stats.eligible || 0} detail="Rows that can win without any manual override." tone="emerald" />
                  <StatCard label="Force Hero" value={activeForceHeroEntry ? 'On' : 'Off'} detail={activeForceHeroEntry ? `${activeForceHeroEntry.artwork?.title || 'Selected artwork'} is overriding the normal order.` : 'Normal winner logic is in control.'} tone="amber" />
                  <StatCard label="Expiring soon" value={soonExpiringEntries.length} detail={soonExpiringEntries[0] ? `${soonExpiringEntries[0].artwork?.title || 'Next row'} is the nearest expiry.` : 'No featured rows expire in the next 7 days.'} tone={soonExpiringEntries.length > 0 ? 'rose' : 'sky'} />
                </div>
              </div>
            </section>

            <NoticeBanner notice={notice} />

            <div className="grid gap-8 xl:grid-cols-[1.3fr_0.7fr]">
              <section className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm">
                <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                  <div>
                    <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
                    <h2 className="mt-2 text-3xl font-semibold tracking-[-0.05em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
                    <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-300">
                      {winner?.selection_reason || 'There is no active, non-expired, eligible featured artwork right now.'}
                    </p>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {winner ? <Badge label="Winner" tone="amber" /> : <Badge label="No winner" tone="rose" />}
                    {winner?.is_force_hero ? <Badge label="Force Hero" tone="amber" /> : <Badge label="Normal logic" tone="sky" />}
                  </div>
                </div>

                <div className="mt-6 grid gap-6 lg:grid-cols-[240px_1fr]">
                  <a href={winner?.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[26px] border border-white/10 bg-[#09121f]" target="_blank" rel="noreferrer">
                    <img
                      src={winner?.artwork?.thumbnail?.url}
                      alt={winner?.artwork?.title || 'Winner preview'}
                      className="h-full min-h-[220px] w-full object-cover"
                    />
                  </a>

                  <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                    <MetricTile label="Artist" value={winner?.artwork?.owner?.display_name || 'Unknown'} hint={winner?.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner?.artwork?.owner?.username || ''}`} />
                    <MetricTile label="Priority" value={winner?.priority ?? '—'} hint="Primary tie-breaker in hero selection." />
                    <MetricTile label="Medal score" value={winner?.medals?.score_30d || 0} hint="Last 30 days." />
                    <MetricTile label="Featured Since" value={formatDateTime(winner?.featured_at)} hint="Used after priority and medal score." />
                  </div>
                </div>

                {winner?.is_force_hero ? (
                  <div className="mt-5 rounded-[22px] border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
                    Force Hero is active. This row bypasses the normal ranking until editors disable the override from the roster below.
                  </div>
                ) : null}
              </section>

              <section className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm">
                <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Editorial Radar</div>
                <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Know what happens next before you touch a row.</h2>

                <div className="mt-6 space-y-4">
                  <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
                    <div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">Natural fallback</div>
                    <div className="mt-2 text-lg font-semibold text-white">{naturalFallback?.artwork?.title || 'No fallback candidate'}</div>
                    <div className="mt-1 text-sm leading-6 text-slate-400">{naturalFallback ? `${formatOwner(naturalFallback)} · Priority ${naturalFallback.priority} · Medal ${naturalFallback.medals?.score_30d || 0}` : 'All remaining rows are either inactive, expired, or ineligible.'}</div>
                  </div>

                  <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
                    <div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">Needs attention</div>
                    {attentionEntries.length === 0 ? (
                      <div className="mt-2 text-sm leading-6 text-slate-300">No active rows are currently blocked by expiry or eligibility rules.</div>
                    ) : (
                      <div className="mt-3 space-y-3">
                        {attentionEntries.map((entry) => (
                          <button
                            type="button"
                            key={entry.id}
                            onClick={() => {
                              React.startTransition(() => {
                                setFilter('attention')
                                setListQuery(String(entry.artwork?.id || entry.artwork_id || entry.id))
                              })
                              scrollToSection(rosterRef)
                            }}
                            className="block w-full rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-left transition hover:border-white/20 hover:bg-white/[0.05]"
                          >
                            <div className="text-sm font-semibold text-white">{entry.artwork?.title || `Featured row #${entry.id}`}</div>
                            <div className="mt-1 text-xs leading-5 text-slate-400">{buildEntrySummary(entry)}</div>
                          </button>
                        ))}
                      </div>
                    )}
                  </div>

                  <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
                    <div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">Next expiry checkpoint</div>
                    <div className="mt-2 text-lg font-semibold text-white">{soonExpiringEntries[0]?.artwork?.title || 'Nothing expiring soon'}</div>
                    <div className="mt-1 text-sm leading-6 text-slate-400">{soonExpiringEntries[0] ? `${formatRelativeExpiry(soonExpiringEntries[0].expires_at)} · ${formatDateTime(soonExpiringEntries[0].expires_at)}` : 'No featured rows expire in the next 7 days.'}</div>
                  </div>
                </div>
              </section>
            </div>

            <div className="grid gap-8 xl:grid-cols-[1.25fr_0.75fr]">
              <section ref={rosterRef} className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm">
                <div className="flex flex-col gap-4">
                  <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <div>
                      <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Featured Pool</div>
                      <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Every featured row, with enough context to act quickly.</h2>
                      <p className="mt-2 text-sm leading-6 text-slate-400">Showing {visibleEntries.length} of {filteredEntries.length} matching rows. {entries.length} rows in the full pool.</p>
                    </div>

                    <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_220px_124px] lg:w-[720px]">
                      <input
                        type="text"
                        value={listQuery}
                        onChange={(event) => setListQuery(event.target.value)}
                        placeholder="Filter by title, artist, row ID, or artwork ID"
                        className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
                      />
                      <NovaSelect value={sortKey} onChange={(value) => setSortKey(value)} searchable={false} options={SORT_OPTIONS} />
                      <button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
                        {sortDirection === 'desc' ? 'Desc' : 'Asc'}
                      </button>
                    </div>
                  </div>

                  <div className="flex flex-wrap gap-2">
                    {FILTER_OPTIONS.map((option) => (
                      <FilterChip
                        key={option.value}
                        label={option.label}
                        value={option.value}
                        active={filter === option.value}
                        onClick={(nextValue) => React.startTransition(() => setFilter(nextValue))}
                        count={filterCounts[option.value] ?? 0}
                      />
                    ))}
                  </div>
                </div>

                <div className="mt-6 space-y-4">
                  {filteredEntries.length === 0 ? (
                    <div className="rounded-[26px] border border-dashed border-white/10 bg-black/20 px-6 py-12 text-center text-sm leading-6 text-slate-400">
                      No featured entries match the current search and filter combination.
                    </div>
                  ) : visibleEntries.map((entry) => (
                    <article key={entry.id} className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_20px_50px_rgba(2,6,23,0.22)]">
                      <div className="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">
                        <div className="flex min-w-0 gap-4">
                          <a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="h-28 w-28 shrink-0 overflow-hidden rounded-[22px] border border-white/10 bg-[#08111d]">
                            <img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-full w-full object-cover" />
                          </a>

                          <div className="min-w-0">
                            <div className="flex flex-wrap items-center gap-2">
                              <h3 className="text-lg font-semibold tracking-[-0.03em] text-white">{entry.artwork?.title || 'Missing artwork'}</h3>
                              <span className="text-xs text-slate-400">Artwork #{entry.artwork?.id || entry.artwork_id}</span>
                              <span className="text-xs text-slate-500">Row #{entry.id}</span>
                            </div>

                            <div className="mt-2 text-sm text-slate-300">{formatOwner(entry)}</div>
                            <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-400">{buildEntrySummary(entry)}</p>

                            <div className="mt-3 flex flex-wrap gap-2">
                              {(entry.status_badges || []).map((badge, index) => (
                                <Badge key={`${entry.id}-${badge.label}-${index}`} label={badge.label} tone={badge.tone} />
                              ))}
                            </div>
                          </div>
                        </div>

                        <div className="grid gap-3 sm:grid-cols-2 xl:w-[420px] xl:grid-cols-4">
                          <MetricTile label="Priority" value={entry.priority} hint="Higher wins first" />
                          <MetricTile label="Medal score" value={entry.medals?.score_30d || 0} hint="Last 30d" />
                          <MetricTile label="Featured" value={formatShortDate(entry.featured_at)} hint={formatDateTime(entry.featured_at)} />
                          <MetricTile label="Expires" value={formatRelativeExpiry(entry.expires_at)} hint={formatDateTime(entry.expires_at)} />
                        </div>
                      </div>

                      <div className="mt-5 flex flex-col gap-4 border-t border-white/10 pt-4 xl:flex-row xl:items-center xl:justify-between">
                        <div className="text-sm leading-6 text-slate-400">
                          Visibility: <span className="text-slate-200">{entry.artwork?.visibility || '—'}</span>
                          <span className="mx-2 text-slate-600">•</span>
                          Published: <span className="text-slate-200">{entry.artwork?.published_at ? 'Yes' : 'No'}</span>
                        </div>

                        <div className="flex flex-wrap gap-2 xl:justify-end">
                          <a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
                            Open artwork
                          </a>
                          <button type="button" onClick={() => editEntry(entry)} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
                            Edit row
                          </button>
                          {capabilities.forceHeroEnabled ? (
                            <button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={cn('rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition disabled:cursor-not-allowed disabled:opacity-60', entry.is_force_hero ? 'border-amber-300/25 text-amber-100 hover:border-amber-300/40 hover:bg-amber-400/10' : 'border-amber-300/15 text-amber-50 hover:border-amber-300/30 hover:bg-amber-400/5')}>
                              {busy === `force-${entry.id}` ? 'Saving…' : entry.is_force_hero ? 'Disable Force Hero' : 'Force Hero'}
                            </button>
                          ) : null}
                          <button type="button" onClick={() => handleToggle(entry)} disabled={busy === `toggle-${entry.id}`} className="rounded-full border border-sky-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-60">
                            {busy === `toggle-${entry.id}` ? 'Saving…' : entry.is_active ? 'Deactivate' : 'Activate'}
                          </button>
                          <button type="button" onClick={() => handleDelete(entry)} disabled={busy === `delete-${entry.id}`} className="rounded-full border border-rose-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-400/10 disabled:cursor-not-allowed disabled:opacity-60">
                            {busy === `delete-${entry.id}` ? 'Deleting…' : 'Delete'}
                          </button>
                        </div>
                      </div>
                    </article>
                  ))}

                  {hasMoreEntries ? (
                    <div ref={loadMoreRef} className="rounded-[24px] border border-dashed border-white/10 bg-black/20 px-5 py-6 text-center">
                      <div className="text-sm text-slate-300">Loading more rows as you reach the bottom.</div>
                      <button
                        type="button"
                        onClick={loadMoreEntries}
                        className="mt-4 rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5"
                      >
                        Load 24 more
                      </button>
                    </div>
                  ) : filteredEntries.length > PAGE_SIZE ? (
                    <div className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
                      All matching rows loaded
                    </div>
                  ) : null}
                </div>
              </section>

              <section ref={composerRef} className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm xl:sticky xl:top-6 xl:self-start">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Editorial Composer</div>
                    <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Edit featured row #${editingId}` : 'Build a new featured row'}</h2>
                    <p className="mt-2 text-sm leading-6 text-slate-400">Search, inspect readiness, choose timing, and ship the change without leaving the page context.</p>
                  </div>
                  {editingId ? (
                    <button type="button" onClick={resetEditor} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/5">
                      Cancel edit
                    </button>
                  ) : null}
                </div>

                {!editingId ? (
                  <form onSubmit={handleArtworkSearch} className="mt-6 space-y-4 rounded-[26px] border border-white/10 bg-black/20 p-4">
                    <Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group, then lock one result into the composer.">
                      <div className="flex gap-3">
                        <input
                          type="text"
                          value={searchQuery}
                          onChange={(event) => setSearchQuery(event.target.value)}
                          className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
                          placeholder="Try an artwork ID, title, or creator"
                        />
                        <button type="submit" disabled={busy === 'search'} className="rounded-2xl bg-sky-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-60">
                          {busy === 'search' ? 'Searching…' : 'Search'}
                        </button>
                      </div>
                    </Field>

                    {searchResults.length > 0 ? (
                      <div className="space-y-3">
                        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Search results</div>
                        {searchResults.map((artwork) => (
                          <button
                            type="button"
                            key={artwork.id}
                            onClick={() => chooseArtwork(artwork)}
                            className={cn('grid gap-4 rounded-[22px] border p-3 text-left transition sm:grid-cols-[88px_1fr]', selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10 shadow-[0_12px_30px_rgba(56,189,248,0.15)]' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]')}
                          >
                            <img src={artwork.thumbnail?.url} alt={artwork.title} className="h-24 w-full rounded-2xl object-cover" />
                            <div className="space-y-2">
                              <div className="flex flex-wrap items-center gap-2">
                                <span className="text-sm font-semibold text-white">{artwork.title}</span>
                                <span className="text-xs text-slate-400">#{artwork.id}</span>
                                {artwork.already_featured ? <Badge label="Already Featured" tone="amber" /> : null}
                              </div>
                              <div className="text-xs text-slate-400">{artwork.owner?.display_name || 'Unknown'} · Medal Score (30d): {artwork.medals?.score_30d || 0}</div>
                              <div className="flex flex-wrap gap-2">
                                {(artwork.eligibility?.is_eligible ? [{ label: 'Eligible', tone: 'emerald' }] : [{ label: 'Not eligible', tone: 'rose' }]).concat(
                                  (artwork.eligibility?.reasons || []).map((reason) => ({
                                    label: reason,
                                    tone: reason === 'Missing preview' ? 'rose' : 'slate',
                                  }))
                                ).slice(0, 4).map((badge) => (
                                  <Badge key={`${artwork.id}-${badge.label}`} label={badge.label} tone={badge.tone} />
                                ))}
                              </div>
                            </div>
                          </button>
                        ))}
                      </div>
                    ) : null}
                  </form>
                ) : null}

                {selectedArtwork ? (
                  <div className="mt-6 rounded-[26px] border border-white/10 bg-black/20 p-4">
                    <div className="grid gap-4 sm:grid-cols-[108px_1fr]">
                      <img src={selectedArtwork.thumbnail?.url} alt={selectedArtwork.title || 'Artwork preview'} className="h-28 w-full rounded-2xl object-cover" />
                      <div className="space-y-3">
                        <div>
                          <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Selected Artwork</div>
                          <div className="mt-2 text-lg font-semibold text-white">{selectedArtwork.title}</div>
                          <div className="mt-1 text-sm leading-6 text-slate-400">#{selectedArtwork.id} · {selectedArtwork.owner?.display_name || 'Unknown'} · Medal Score (30d): {selectedArtwork.medals?.score_30d || 0}</div>
                        </div>

                        <div className="flex flex-wrap gap-2">
                          {(selectedArtwork.eligibility?.is_eligible ? [{ label: 'Currently eligible', tone: 'emerald' }] : [{ label: 'Currently ineligible', tone: 'rose' }]).concat(
                            (selectedArtwork.eligibility?.reasons || []).map((reason) => ({
                              label: reason,
                              tone: reason === 'Missing preview' ? 'rose' : 'slate',
                            }))
                          ).map((badge) => (
                            <Badge key={`selected-${badge.label}`} label={badge.label} tone={badge.tone} />
                          ))}
                        </div>

                        <div className="flex flex-wrap gap-2">
                          {selectedArtwork.canonical_url ? (
                            <a href={selectedArtwork.canonical_url} target="_blank" rel="noreferrer" className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
                              Open artwork
                            </a>
                          ) : null}
                          {selectedArtwork.already_featured ? (
                            <button
                              type="button"
                              onClick={() => {
                                React.startTransition(() => {
                                  setFilter('all')
                                  setListQuery(String(selectedArtwork?.id || ''))
                                })
                                scrollToSection(rosterRef)
                              }}
                              className="rounded-full border border-amber-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-amber-50 transition hover:border-amber-300/40 hover:bg-amber-400/10"
                            >
                              Find existing row
                            </button>
                          ) : null}
                        </div>
                      </div>
                    </div>

                    {selectedArtworkSignals.length > 0 ? (
                      <div className="mt-4 grid gap-3">
                        {selectedArtworkSignals.map((signal) => (
                          <div key={signal.label} className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
                            <div className="flex items-center gap-2">
                              <Badge label={signal.label} tone={signal.tone} />
                            </div>
                            <div className="mt-2 text-sm leading-6 text-slate-300">{signal.detail}</div>
                          </div>
                        ))}
                      </div>
                    ) : null}
                  </div>
                ) : null}

                {duplicateSelection ? (
                  <div className="mt-4 rounded-[22px] border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-100">
                    This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
                    <div className="mt-3">
                      <button
                        type="button"
                        onClick={() => {
                          React.startTransition(() => {
                            setFilter('all')
                            setListQuery(String(selectedArtwork?.id || ''))
                          })
                          scrollToSection(rosterRef)
                        }}
                        className="rounded-full border border-amber-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-amber-50 transition hover:border-amber-300/40 hover:bg-amber-400/10"
                      >
                        Find existing row
                      </button>
                    </div>
                  </div>
                ) : null}

                <form onSubmit={handleSubmit} className="mt-6 space-y-5">
                  <Field label="Priority" help="Higher priority always wins before medal score is considered.">
                    <div className="space-y-3">
                      <input
                        type="number"
                        min="0"
                        value={form.priority}
                        onChange={(event) => setForm((current) => ({ ...current, priority: event.target.value }))}
                        className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
                      />
                      <div className="flex flex-wrap gap-2">
                        {PRIORITY_PRESETS.map((preset) => (
                          <button
                            type="button"
                            key={preset}
                            onClick={() => setForm((current) => ({ ...current, priority: preset }))}
                            className={cn('rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] transition', Number(form.priority) === preset ? 'border-sky-300/40 bg-sky-400/10 text-sky-100' : 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-white/[0.05]')}
                          >
                            {preset}
                          </button>
                        ))}
                        <button
                          type="button"
                          onClick={() => setForm((current) => ({ ...current, priority: suggestedPriority }))}
                          className="rounded-full border border-emerald-300/20 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/10"
                        >
                          Winner + 20
                        </button>
                        {winner ? (
                          <button
                            type="button"
                            onClick={() => setForm((current) => ({ ...current, priority: Number(winner.priority || 0) }))}
                            className="rounded-full border border-white/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 transition hover:border-white/20 hover:bg-white/[0.05]"
                          >
                            Match winner
                          </button>
                        ) : null}
                      </div>
                    </div>
                  </Field>

                  <Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
                    <label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
                      <Checkbox
                        checked={Boolean(form.is_active)}
                        onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
                      />
                      <span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
                    </label>
                  </Field>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <Field label="Featured Since">
                      <DateTimePicker value={form.featured_at} onChange={(nextValue) => setForm((current) => ({ ...current, featured_at: nextValue }))} placeholder="Featured since" clearable className="bg-[#08111d]" />
                    </Field>

                    <Field label="Expires">
                      <DateTimePicker value={form.expires_at} onChange={(nextValue) => setForm((current) => ({ ...current, expires_at: nextValue }))} placeholder="Expiry date" clearable className="bg-[#08111d]" />
                    </Field>
                  </div>

                  <div className="flex flex-wrap gap-3">
                    <button
                      type="submit"
                      disabled={busy === 'submit' || (!editingId && !selectedArtwork) || duplicateSelection}
                      className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
                    >
                      {busy === 'submit' ? 'Saving…' : editingId ? 'Save Changes' : 'Create Featured Entry'}
                    </button>
                    {editingId ? (
                      <button type="button" onClick={resetEditor} className="rounded-2xl border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
                        Reset composer
                      </button>
                    ) : null}
                  </div>
                </form>
              </section>
            </div>
          </div>
        </div>

        <div className="fixed inset-x-4 bottom-4 z-30 xl:hidden">
          <div className="grid grid-cols-3 gap-3 rounded-[26px] border border-white/10 bg-[#08111d]/95 p-3 shadow-[0_24px_70px_rgba(2,6,23,0.42)] backdrop-blur-xl">
            <DockButton
              label="Winner"
              detail={winner?.artwork?.title || 'No live winner'}
              tone="sky"
              onClick={scrollToTop}
            />
            <DockButton
              label="Attention"
              detail={`${filterCounts.attention || 0} row${(filterCounts.attention || 0) === 1 ? '' : 's'}`}
              tone="amber"
              onClick={() => {
                React.startTransition(() => setFilter('attention'))
                scrollToSection(rosterRef)
              }}
            />
            <DockButton
              label="Composer"
              detail={editingId ? `Editing #${editingId}` : 'Add featured row'}
              tone="slate"
              onClick={() => scrollToSection(composerRef)}
            />
          </div>
        </div>
      </div>
    </>
  )
}