import React from 'react'
import { Head, usePage } from '@inertiajs/react'

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 Badge({ label, tone = 'slate' }) {
  const toneClasses = {
    slate: 'border-white/10 bg-white/10 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={`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 StatCard({ label, value, 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={`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.04em] text-white">{value}</div>
    </div>
  )
}

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,
  }
}

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
  }

  const leftFeatured = new Date(left.featured_at || 0).getTime() || 0
  const rightFeatured = new Date(right.featured_at || 0).getTime() || 0
  if (leftFeatured !== rightFeatured) {
    return (leftFeatured > rightFeatured ? 1 : -1) * dir
  }

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

export default function FeaturedArtworksAdmin() {
  const { props } = usePage()
  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('')
  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 [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())

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

  function syncPayload(payload) {
    setEntries(Array.isArray(payload.entries) ? payload.entries : [])
    setWinner(payload.winner || null)
    setStats(payload.stats || {})
    if (payload.message) {
      setNotice(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('')

    try {
      const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
      const payload = await requestJson(url, { method: 'GET' })
      setSearchResults(Array.isArray(payload.results) ? payload.results : [])
      if ((payload.results || []).length === 0) {
        setNotice('No artworks matched that search.')
      }
    } catch (error) {
      setNotice(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),
    })

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

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

    setBusy('submit')
    setNotice('')

    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(error.message || 'Failed to save this featured entry.')
    } finally {
      setBusy('')
    }
  }

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

    try {
      const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
        method: 'PATCH',
      })
      syncPayload(payload)
    } catch (error) {
      setNotice(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('')

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

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

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

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

  const filteredEntries = React.useMemo(() => {
    const query = listQuery.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
        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,
        ].join(' ').toLowerCase()

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

  const duplicateSelection = !editingId && selectedArtwork?.already_featured

  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}
      </Head>

      <div className="min-h-screen bg-[#07111c] text-white">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
          <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-6 lg:flex-row lg:items-start lg: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.05em] text-white sm:text-5xl">Homepage hero control, with the real winner logic exposed.</h1>
                <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">Editors can create, update, activate, expire, and remove featured entries here. The winner summary below mirrors the public homepage selection order: priority, recent medal score, featured date, then published date.</p>
              </div>
              <div className="grid w-full max-w-xl grid-cols-2 gap-4 md:grid-cols-3">
                <StatCard label="Entries" value={stats.total || 0} tone="sky" />
                <StatCard label="Eligible" value={stats.eligible || 0} tone="emerald" />
                <StatCard label="Expired" value={stats.expired || 0} tone="amber" />
                <StatCard label="Active" value={stats.active || 0} tone="sky" />
                <StatCard label="Inactive" value={stats.inactive || 0} tone="rose" />
                <StatCard label="Not Eligible" value={stats.ineligible || 0} tone="rose" />
              </div>
            </div>
          </section>

          {notice ? (
            <div className="rounded-2xl border border-sky-300/15 bg-sky-400/10 px-4 py-3 text-sm text-sky-50">
              {notice}
            </div>
          ) : null}

          <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
            <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
                  <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
                  <p className="mt-2 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>
                  {winner?.is_force_hero ? (
                    <div className="mt-4 max-w-2xl rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
                      Forced by editor. This artwork bypasses the normal hero winner order until Force Hero is disabled on its featured row.
                    </div>
                  ) : null}
                </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" /> : null}
                </div>
              </div>

              {winner ? (
                <div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
                  <a href={winner.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[24px] 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-[180px] w-full object-cover"
                    />
                  </a>
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Artist</div>
                      <div className="mt-2 text-lg font-semibold text-white">{winner.artwork?.owner?.display_name || 'Unknown'}</div>
                      <div className="mt-1 text-sm text-slate-400">{winner.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner.artwork?.owner?.username || ''}`}</div>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Medal Score (30d)</div>
                      <div className="mt-2 text-lg font-semibold text-white">{winner.medals?.score_30d || 0}</div>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Priority</div>
                      <div className="mt-2 text-lg font-semibold text-white">{winner.priority}</div>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Featured Since</div>
                      <div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.featured_at)}</div>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4 sm:col-span-2">
                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Published At</div>
                      <div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.artwork?.published_at)}</div>
                    </div>
                  </div>
                </div>
              ) : null}
            </section>

            <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{editingId ? 'Edit Entry' : 'Create Entry'}</div>
                  <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Featured entry #${editingId}` : 'Add an artwork to the featured pool'}</h2>
                </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-[24px] border border-white/10 bg-black/20 p-4">
                  <Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group. Pick a result to lock it into the form.">
                    <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="grid gap-3">
                      {searchResults.map((artwork) => (
                        <button
                          type="button"
                          key={artwork.id}
                          onClick={() => chooseArtwork(artwork)}
                          className={`grid gap-4 rounded-2xl border p-3 text-left transition sm:grid-cols-[88px_1fr] ${selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10' : '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 grid gap-4 rounded-[24px] border border-white/10 bg-black/20 p-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 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>
                </div>
              ) : null}

              {duplicateSelection ? (
                <div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
                  This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
                </div>
              ) : null}

              <form onSubmit={handleSubmit} className="mt-6 grid gap-4 sm:grid-cols-2">
                <Field label="Priority" help="Higher priority always wins before medal score is considered.">
                  <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"
                  />
                </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">
                    <input
                      type="checkbox"
                      checked={Boolean(form.is_active)}
                      onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
                      className="h-4 w-4 rounded border-white/20 bg-transparent text-sky-400 focus:ring-sky-300/30"
                    />
                    <span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
                  </label>
                </Field>

                <Field label="Featured Since">
                  <input
                    type="datetime-local"
                    value={form.featured_at}
                    onChange={(event) => setForm((current) => ({ ...current, featured_at: 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"
                  />
                </Field>

                <Field label="Expires">
                  <input
                    type="datetime-local"
                    value={form.expires_at}
                    onChange={(event) => setForm((current) => ({ ...current, expires_at: 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"
                  />
                </Field>

                <div className="sm:col-span-2 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
                    </button>
                  ) : null}
                </div>
              </form>
            </section>
          </div>

          <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
            <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 eligibility and winner state visible.</h2>
              </div>
              <div className="grid gap-3 sm:grid-cols-3 lg:w-[720px]">
                <input
                  type="text"
                  value={listQuery}
                  onChange={(event) => setListQuery(event.target.value)}
                  placeholder="Filter by title, artist, 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"
                />
                <select value={filter} onChange={(event) => setFilter(event.target.value)} 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">
                  <option value="all">All rows</option>
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                  <option value="expired">Expired</option>
                  <option value="winner">Winner</option>
                  <option value="eligible">Eligible</option>
                  <option value="ineligible">Not eligible</option>
                </select>
                <div className="grid grid-cols-[1fr_auto] gap-3">
                  <select value={sortKey} onChange={(event) => setSortKey(event.target.value)} 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">
                    <option value="priority">Priority</option>
                    <option value="featured_at">Featured Since</option>
                    <option value="expires_at">Expires</option>
                    <option value="score_30d">Medal Score (30d)</option>
                  </select>
                  <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>

            <div className="mt-6 overflow-hidden rounded-[24px] border border-white/10">
              <div className="hidden grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] gap-4 border-b border-white/10 bg-black/20 px-5 py-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 lg:grid">
                <div>Artwork</div>
                <div>Artist / Owner</div>
                <div>Priority</div>
                <div>Featured Since</div>
                <div>Expires</div>
                <div>Score (30d)</div>
                <div>Status</div>
                <div>Actions</div>
              </div>

              <div className="divide-y divide-white/10">
                {filteredEntries.length === 0 ? (
                  <div className="px-5 py-10 text-center text-sm text-slate-400">No featured entries match the current filter.</div>
                ) : filteredEntries.map((entry) => (
                  <div key={entry.id} className="grid gap-5 bg-white/[0.02] px-5 py-5 lg:grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] lg:items-center">
                    <div className="grid gap-4 sm:grid-cols-[92px_1fr]">
                      <a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="overflow-hidden rounded-2xl border border-white/10 bg-[#08111d]">
                        <img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-24 w-full object-cover" />
                      </a>
                      <div>
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="text-sm font-semibold text-white">{entry.artwork?.title || 'Missing artwork'}</span>
                          <span className="text-xs text-slate-400">#{entry.artwork?.id || entry.artwork_id}</span>
                        </div>
                        <div className="mt-2 text-xs leading-6 text-slate-400">Visibility: {entry.artwork?.visibility || '—'} • Published: {entry.artwork?.published_at ? 'Yes' : 'No'}</div>
                        {entry.is_winner && entry.winner_reason ? <div className="mt-2 text-xs leading-6 text-amber-100">{entry.winner_reason}</div> : null}
                      </div>
                    </div>

                    <div>
                      <div className="text-sm font-semibold text-white">{entry.artwork?.owner?.display_name || 'Unknown'}</div>
                      <div className="mt-1 text-xs text-slate-400">{entry.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${entry.artwork?.owner?.username || ''}`}</div>
                    </div>

                    <div className="text-sm font-semibold text-white">{entry.priority}</div>
                    <div className="text-sm text-slate-200">{formatDateTime(entry.featured_at)}</div>
                    <div className="text-sm text-slate-200">{formatDateTime(entry.expires_at)}</div>
                    <div className="text-sm font-semibold text-white">{entry.medals?.score_30d || 0}</div>

                    <div className="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 className="flex flex-wrap gap-2 lg:justify-end">
                      <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
                      </button>
                      {capabilities.forceHeroEnabled ? (
                        <button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={`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>
                ))}
              </div>
            </div>
          </section>
        </div>
      </div>
    </>
  )
}