import React from 'react'
import { usePage } from '@inertiajs/react'
import ArtworkGallery from '../../components/artwork/ArtworkGallery'
import CollectionCard from '../../components/profile/collections/CollectionCard'
import CollectionVisibilityBadge from '../../components/profile/collections/CollectionVisibilityBadge'
import NovaSelect from '../../components/ui/NovaSelect'
import SeoHead from '../../components/seo/SeoHead'
import CommentForm from '../../components/social/CommentForm'
import CommentList from '../../components/social/CommentList'
import useWebShare from '../../hooks/useWebShare'

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 || 'Request failed.')
  }

  return payload
}

function TypeBadge({ collection }) {
  const label = collection?.type === 'editorial'
    ? 'Editorial'
    : collection?.type === 'community'
      ? 'Community'
      : 'Personal'

  return <span className="inline-flex items-center 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">{label}</span>
}

const COLLABORATOR_ROLE_COLORS = {
  owner:       'border-amber-300/20 bg-amber-400/10 text-amber-200',
  moderator:   'border-sky-300/20 bg-sky-400/10 text-sky-200',
  contributor: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-200',
  curator:     'border-violet-300/20 bg-violet-400/10 text-violet-200',
}

function CollaboratorCard({ member }) {
  const roleColor = COLLABORATOR_ROLE_COLORS[String(member?.role || '').toLowerCase()] ?? 'border-white/10 bg-white/[0.05] text-slate-300'
  return (
    <a href={member?.user?.profile_url || '#'} className="group flex items-center gap-4 rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-4 transition hover:border-white/20 hover:bg-white/[0.07]">
      {member?.user?.avatar_url ? (
        <img src={member.user.avatar_url} alt={member?.user?.name || member?.user?.username} className="h-12 w-12 rounded-2xl object-cover ring-1 ring-white/10 transition group-hover:ring-sky-400/30" />
      ) : (
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-400">
          <i className="fa-solid fa-user" />
        </div>
      )}
      <div className="min-w-0 flex-1">
        <div className="truncate text-sm font-semibold text-white group-hover:text-sky-100">{member?.user?.name || member?.user?.username}</div>
        {member?.user?.username ? <div className="text-xs text-slate-500">@{member.user.username}</div> : null}
      </div>
      <span className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] ${roleColor}`}>
        {member?.role}{member?.status === 'pending' ? ' · invited' : ''}
      </span>
    </a>
  )
}

function SubmissionCard({ submission, onApprove, onReject, onWithdraw, onReport }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
      <div className="flex items-start gap-3">
        {submission?.artwork?.thumb ? <img src={submission.artwork.thumb} alt={submission.artwork.title} className="h-20 w-20 rounded-2xl object-cover" /> : null}
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <div className="truncate text-sm font-semibold text-white">{submission?.artwork?.title || 'Artwork submission'}</div>
            <span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-300">{submission?.status}</span>
          </div>
          <p className="mt-1 text-xs text-slate-400">Submitted by @{submission?.user?.username}</p>
          {submission?.message ? <p className="mt-2 text-sm text-slate-300">{submission.message}</p> : null}
          <div className="mt-3 flex flex-wrap gap-2">
            {submission?.can_review ? <button type="button" onClick={() => onApprove?.(submission)} className="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-2 text-xs font-semibold text-emerald-100">Approve</button> : null}
            {submission?.can_review ? <button type="button" onClick={() => onReject?.(submission)} className="rounded-full border border-rose-400/20 bg-rose-400/10 px-3 py-2 text-xs font-semibold text-rose-100">Reject</button> : null}
            {submission?.can_withdraw ? <button type="button" onClick={() => onWithdraw?.(submission)} className="rounded-full border border-white/12 bg-white/[0.05] px-3 py-2 text-xs font-semibold text-white">Withdraw</button> : null}
            {submission?.can_report ? <button type="button" onClick={() => onReport?.(submission)} className="rounded-full border border-white/12 bg-white/[0.05] px-3 py-2 text-xs font-semibold text-white">Report</button> : null}
          </div>
        </div>
      </div>
    </div>
  )
}

const METAROW_TONES = {
  'fa-images':       { icon: 'text-sky-300',     bg: 'bg-sky-400/10 border-sky-300/20',     bar: 'from-sky-400/60' },
  'fa-heart':        { icon: 'text-rose-300',    bg: 'bg-rose-400/10 border-rose-300/20',    bar: 'from-rose-400/60' },
  'fa-bell':         { icon: 'text-emerald-300', bg: 'bg-emerald-400/10 border-emerald-300/20', bar: 'from-emerald-400/60' },
  'fa-eye':          { icon: 'text-violet-300',  bg: 'bg-violet-400/10 border-violet-300/20', bar: 'from-violet-400/60' },
  'fa-bookmark':     { icon: 'text-amber-300',   bg: 'bg-amber-400/10 border-amber-300/20',   bar: 'from-amber-400/60' },
  'fa-panorama':     { icon: 'text-slate-300',   bg: 'bg-white/[0.05] border-white/10',       bar: 'from-slate-400/40' },
  'fa-gauge-high':   { icon: 'text-teal-300',    bg: 'bg-teal-400/10 border-teal-300/20',     bar: 'from-teal-400/60' },
  'fa-ranking-star': { icon: 'text-amber-300',   bg: 'bg-amber-400/10 border-amber-300/20',   bar: 'from-amber-400/60' },
  'fa-bullhorn':     { icon: 'text-orange-300',  bg: 'bg-orange-400/10 border-orange-300/20', bar: 'from-orange-400/60' },
}

function MetaRow({ icon, label, value, compact = false }) {
  const title = `${label}: ${value}`
  const tone = METAROW_TONES[icon] ?? { icon: 'text-slate-300', bg: 'bg-white/[0.05] border-white/10', bar: 'from-slate-400/40' }

  if (compact) {
    return (
      <div
        className="relative overflow-hidden flex min-w-0 flex-col items-center rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-4 text-center transition-colors hover:bg-white/[0.07]"
        title={title}
        aria-label={title}
      >
        <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${tone.bar} via-transparent to-transparent`} />
        <div className={`flex h-9 w-9 items-center justify-center rounded-xl border ${tone.bg}`}>
          <i className={`fa-solid ${icon} text-sm ${tone.icon}`} />
        </div>
        <div className="mt-2 text-xl font-bold tabular-nums text-white">{value}</div>
        <div className="mt-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">{label}</div>
      </div>
    )
  }

  return (
    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 transition-colors hover:bg-white/[0.07]" title={title}>
      <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${tone.bar} via-transparent to-transparent`} />
      <div className={`flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] ${tone.icon}`}>
        <i className={`fa-solid ${icon} text-[10px]`} />
        {label}
      </div>
      <div className="mt-1 text-lg font-semibold text-white">{value}</div>
    </div>
  )
}

const HERO_ACTION_TONES = {
  neutral: {
    idle: 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.09]',
    active: 'border-white/15 bg-[linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04))] text-white shadow-[0_18px_40px_rgba(2,6,23,0.18)]',
    icon: 'border-white/10 bg-white/[0.08] text-slate-200',
    iconActive: 'border-white/15 bg-white/[0.12] text-white',
  },
  rose: {
    idle: 'border-white/10 bg-white/[0.05] text-white hover:border-rose-400/30 hover:bg-rose-400/[0.12] hover:text-rose-100',
    active: 'border-rose-400/30 bg-[linear-gradient(135deg,rgba(244,63,94,0.18),rgba(255,255,255,0.06))] text-rose-50 shadow-[0_18px_40px_rgba(244,63,94,0.14)]',
    icon: 'border-rose-300/15 bg-rose-400/[0.08] text-rose-200',
    iconActive: 'border-rose-300/30 bg-rose-400/[0.16] text-rose-50',
  },
  emerald: {
    idle: 'border-white/10 bg-white/[0.05] text-white hover:border-emerald-400/30 hover:bg-emerald-400/[0.12] hover:text-emerald-100',
    active: 'border-emerald-400/30 bg-[linear-gradient(135deg,rgba(52,211,153,0.18),rgba(255,255,255,0.06))] text-emerald-50 shadow-[0_18px_40px_rgba(52,211,153,0.14)]',
    icon: 'border-emerald-300/15 bg-emerald-400/[0.08] text-emerald-200',
    iconActive: 'border-emerald-300/30 bg-emerald-400/[0.16] text-emerald-50',
  },
  violet: {
    idle: 'border-white/10 bg-white/[0.05] text-white hover:border-violet-400/30 hover:bg-violet-400/[0.12] hover:text-violet-100',
    active: 'border-violet-400/30 bg-[linear-gradient(135deg,rgba(167,139,250,0.18),rgba(255,255,255,0.06))] text-violet-50 shadow-[0_18px_40px_rgba(167,139,250,0.14)]',
    icon: 'border-violet-300/15 bg-violet-400/[0.08] text-violet-200',
    iconActive: 'border-violet-300/30 bg-violet-400/[0.16] text-violet-50',
  },
  sky: {
    idle: 'border-white/10 bg-white/[0.05] text-white hover:border-sky-400/30 hover:bg-sky-400/[0.12] hover:text-sky-100',
    active: 'border-sky-400/30 bg-[linear-gradient(135deg,rgba(56,189,248,0.18),rgba(255,255,255,0.06))] text-sky-50 shadow-[0_18px_40px_rgba(56,189,248,0.14)]',
    icon: 'border-sky-300/15 bg-sky-400/[0.08] text-sky-200',
    iconActive: 'border-sky-300/30 bg-sky-400/[0.16] text-sky-50',
  },
  amber: {
    idle: 'border-white/10 bg-white/[0.05] text-white hover:border-amber-400/30 hover:bg-amber-400/[0.12] hover:text-amber-100',
    active: 'border-amber-400/30 bg-[linear-gradient(135deg,rgba(251,191,36,0.18),rgba(255,255,255,0.06))] text-amber-50 shadow-[0_18px_40px_rgba(251,191,36,0.14)]',
    icon: 'border-amber-300/15 bg-amber-400/[0.08] text-amber-200',
    iconActive: 'border-amber-300/30 bg-amber-400/[0.16] text-amber-50',
  },
}

function CollectionHeroAction({ href = null, onClick = null, icon, label, tone = 'neutral', active = false, disabled = false, compact = false }) {
  const toneClasses = HERO_ACTION_TONES[tone] ?? HERO_ACTION_TONES.neutral
  const Component = href ? 'a' : 'button'
  const componentProps = href
    ? { href }
    : { type: 'button', onClick, disabled }

  return (
    <Component
      {...componentProps}
      className={`group inline-flex items-center justify-center gap-3 rounded-[20px] border px-4 ${compact ? 'py-3' : 'py-3.5'} text-sm font-semibold tracking-[-0.01em] transition duration-200 ${active ? toneClasses.active : toneClasses.idle} ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
    >
      <span className={`flex h-9 w-9 items-center justify-center rounded-2xl border transition ${active ? toneClasses.iconActive : toneClasses.icon}`}>
        <i className={`fa-solid ${icon} text-sm`} />
      </span>
      <span>{label}</span>
    </Component>
  )
}

const HERO_METRIC_TONES = {
  sky: {
    icon: 'text-sky-200',
    chip: 'border-sky-300/20 bg-sky-400/[0.12]',
    glow: 'from-sky-400/35',
    orb: 'bg-sky-400/20',
  },
  rose: {
    icon: 'text-rose-200',
    chip: 'border-rose-300/20 bg-rose-400/[0.12]',
    glow: 'from-rose-400/35',
    orb: 'bg-rose-400/20',
  },
  emerald: {
    icon: 'text-emerald-200',
    chip: 'border-emerald-300/20 bg-emerald-400/[0.12]',
    glow: 'from-emerald-400/35',
    orb: 'bg-emerald-400/20',
  },
  violet: {
    icon: 'text-violet-200',
    chip: 'border-violet-300/20 bg-violet-400/[0.12]',
    glow: 'from-violet-400/35',
    orb: 'bg-violet-400/20',
  },
  amber: {
    icon: 'text-amber-200',
    chip: 'border-amber-300/20 bg-amber-400/[0.12]',
    glow: 'from-amber-400/35',
    orb: 'bg-amber-400/20',
  },
  slate: {
    icon: 'text-slate-200',
    chip: 'border-white/10 bg-white/[0.08]',
    glow: 'from-white/20',
    orb: 'bg-white/[0.12]',
  },
}

function HeroMetricCard({ icon, label, value, helper = null, tone = 'slate' }) {
  const style = HERO_METRIC_TONES[tone] ?? HERO_METRIC_TONES.slate

  return (
    <div className="relative overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(15,23,42,0.32))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
      <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${style.glow} via-transparent to-transparent`} />
      <div className={`absolute -right-5 top-3 h-14 w-14 rounded-full blur-2xl ${style.orb}`} />
      <div className="relative z-10">
        <div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${style.chip}`}>
          <i className={`fa-solid ${icon} text-base ${style.icon}`} />
        </div>
        <div className="mt-4 text-[2rem] font-black leading-none tracking-[-0.04em] text-white">{value}</div>
        <div className="mt-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{label}</div>
        {helper ? <div className="mt-1 text-xs text-slate-400">{helper}</div> : null}
      </div>
    </div>
  )
}

function HeroSignalCard({ icon, label, value, description = null, tone = 'slate' }) {
  const style = HERO_METRIC_TONES[tone] ?? HERO_METRIC_TONES.slate

  return (
    <div className="relative overflow-hidden rounded-[24px] border border-white/10 bg-[linear-gradient(135deg,rgba(255,255,255,0.06),rgba(15,23,42,0.32))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
      <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${style.glow} via-transparent to-transparent`} />
      <div className="relative z-10 flex items-start gap-3">
        <div className={`mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border ${style.chip}`}>
          <i className={`fa-solid ${icon} text-base ${style.icon}`} />
        </div>
        <div className="min-w-0 flex-1">
          <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{label}</div>
          <div className="mt-1 text-2xl font-black tracking-[-0.04em] text-white">{value}</div>
          {description ? <p className="mt-2 text-sm leading-relaxed text-slate-400">{description}</p> : null}
        </div>
      </div>
    </div>
  )
}

function getSpotlightClasses(style) {
  switch (style) {
    case 'editorial':
      return 'border-amber-300/20 bg-[linear-gradient(135deg,rgba(120,53,15,0.45),rgba(2,6,23,0.82))] text-amber-50'
    case 'seasonal':
      return 'border-emerald-300/20 bg-[linear-gradient(135deg,rgba(6,78,59,0.5),rgba(2,6,23,0.82))] text-emerald-50'
    case 'challenge':
      return 'border-fuchsia-300/20 bg-[linear-gradient(135deg,rgba(112,26,117,0.48),rgba(2,6,23,0.82))] text-fuchsia-50'
    case 'community':
      return 'border-sky-300/20 bg-[linear-gradient(135deg,rgba(3,105,161,0.45),rgba(2,6,23,0.82))] text-sky-50'
    default:
      return 'border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.9),rgba(30,41,59,0.72))] text-white'
  }
}

function EmptyCollectionState({ isOwner, smart = false }) {
  return (
    <div className="rounded-[28px] border border-white/10 bg-white/[0.04] px-6 py-14 text-center">
      <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-[24px] border border-white/12 bg-white/[0.06] text-slate-400">
        <i className={`fa-solid ${smart ? 'fa-wand-magic-sparkles' : 'fa-images'} text-3xl`} />
      </div>
      <h2 className="mt-5 text-2xl font-semibold text-white">This collection is still taking shape</h2>
      <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-slate-300">
        {isOwner
          ? (smart ? 'Adjust the smart rules to broaden the match or publish more artworks that fit this set.' : 'Add artworks to start building the visual rhythm, cover image, and sequence for this showcase.')
          : (smart ? 'This smart collection does not have visible matches right now.' : 'There are no visible artworks in this collection right now.')}
      </p>
    </div>
  )
}

function OwnerCard({ owner, collectionType }) {
  const label = owner?.is_system
    ? 'Editorial Owner'
    : collectionType === 'editorial'
      ? 'Editorial Curator'
      : 'Curator'

  const body = (
    <div className="flex items-center gap-4">
      <div className="relative shrink-0">
        {owner?.avatar_url ? (
          <img src={owner.avatar_url} alt={owner?.name || owner?.username} className="h-14 w-14 rounded-2xl object-cover ring-2 ring-white/10" />
        ) : (
          <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.06] text-slate-400">
            <i className="fa-solid fa-user-astronaut text-xl" />
          </div>
        )}
        <div className="absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full border border-white/10 bg-sky-500 text-white">
          <i className="fa-solid fa-pen-nib text-[8px]" />
        </div>
      </div>
      <div className="min-w-0">
        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
        <div className="mt-0.5 text-lg font-semibold text-white">{owner?.name || owner?.username || 'Skinbase Curator'}</div>
        {owner?.username ? <div className="text-sm text-slate-400">@{owner.username}</div> : null}
      </div>
      {owner?.profile_url ? <i className="fa-solid fa-arrow-up-right-from-square ml-auto shrink-0 text-slate-500 text-sm" /> : null}
    </div>
  )

  if (owner?.profile_url) {
    return (
      <div className="mt-7 overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(135deg,rgba(255,255,255,0.06),rgba(15,23,42,0.34))] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition hover:border-sky-400/25 hover:bg-[linear-gradient(135deg,rgba(255,255,255,0.08),rgba(15,23,42,0.4))]">
        <div className="h-[2px] bg-gradient-to-r from-sky-400/55 via-sky-400/20 to-transparent" />
        <a href={owner.profile_url} className="block px-5 py-4">{body}</a>
      </div>
    )
  }

  return (
    <div className="mt-7 overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(135deg,rgba(255,255,255,0.06),rgba(15,23,42,0.34))] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
      <div className="h-[2px] bg-gradient-to-r from-sky-400/55 via-sky-400/20 to-transparent" />
      <div className="px-5 py-4">{body}</div>
    </div>
  )
}

function PageSection({ eyebrow, title, count, icon, children }) {
  return (
    <section className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-start gap-3">
          {icon && (
            <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-sky-300">
              <i className={`fa-solid ${icon} text-sm`} />
            </div>
          )}
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">{eyebrow}</p>
            <h2 className="mt-1 text-2xl font-semibold text-white">{title}</h2>
          </div>
        </div>
        {count !== undefined ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{count}</span> : null}
      </div>
      <div className="mt-5">{children}</div>
    </section>
  )
}

function EntityLinkCard({ item }) {
  return (
    <a href={item?.url || '#'} className="flex h-full flex-col gap-4 rounded-[24px] border border-white/10 bg-white/[0.04] p-5 transition hover:bg-white/[0.07]">
      <div className="flex items-start gap-4">
        {item?.image_url ? <img src={item.image_url} alt={item?.title} className="h-16 w-16 rounded-[18px] object-cover ring-1 ring-white/10" /> : <div className="flex h-16 w-16 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.05] text-slate-400"><i className="fa-solid fa-diagram-project" /></div>}
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h3 className="truncate text-lg font-semibold text-white">{item?.title}</h3>
            {item?.meta ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{item.meta}</span> : null}
          </div>
          {item?.subtitle ? <p className="mt-1 text-sm text-slate-400">{item.subtitle}</p> : null}
          {item?.relationship_type ? <p className="mt-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-200/80">{item.relationship_type}</p> : null}
        </div>
      </div>
      {item?.description ? <p className="text-sm leading-relaxed text-slate-300">{item.description}</p> : null}
    </a>
  )
}

function CollectionCover({ collection }) {
  const coverImage = collection?.cover_image
  const coverMaturity = collection?.cover_image_maturity || null
  const shouldBlur = Boolean(coverMaturity?.should_blur)
  const isMature = Boolean(coverMaturity?.is_mature_effective)

  if (!coverImage) {
    return <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>
  }

  return (
    <div className="relative">
      <img src={coverImage} alt={collection?.title} className={`aspect-[16/10] h-full w-full object-cover ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`} />
      {isMature ? <div className="absolute left-4 top-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
      {shouldBlur ? <div className="absolute inset-x-4 bottom-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
    </div>
  )
}

function humanizeToken(value) {
  return String(value || '')
    .replaceAll('_', ' ')
    .replaceAll('-', ' ')
    .replace(/\b\w/g, (match) => match.toUpperCase())
}

function groupEntityLinks(items) {
  return (Array.isArray(items) ? items : []).reduce((groups, item) => {
    const key = item?.linked_type || 'other'
    if (!groups[key]) groups[key] = []
    groups[key].push(item)
    return groups
  }, {})
}

function recommendationReasons(currentCollection, candidate) {
  const reasons = []

  if (candidate?.event_key && currentCollection?.event_key && candidate.event_key === currentCollection.event_key) {
    reasons.push('Same event context')
  }

  if (candidate?.campaign_key && currentCollection?.campaign_key && candidate.campaign_key === currentCollection.campaign_key) {
    reasons.push('Same campaign')
  }

  if (candidate?.theme_token && currentCollection?.theme_token && candidate.theme_token === currentCollection.theme_token) {
    reasons.push('Shared theme')
  }

  if (candidate?.type && currentCollection?.type && candidate.type === currentCollection.type) {
    reasons.push(`${humanizeToken(candidate.type)} collection`)
  }

  if (candidate?.owner?.id && currentCollection?.owner?.id && candidate.owner.id === currentCollection.owner.id) {
    reasons.push('Same curator')
  }

  if (candidate?.trust_tier && currentCollection?.trust_tier && candidate.trust_tier === currentCollection.trust_tier) {
    reasons.push(`${humanizeToken(candidate.trust_tier)} trust tier`)
  }

  return reasons.slice(0, 3)
}

const CONTEXT_SIGNAL_TYPES = {
  Campaign:     { icon: 'fa-solid fa-bullhorn',      accent: 'border-orange-300/20 from-orange-400/50', badge: 'border-orange-300/20 bg-orange-400/10 text-orange-200', kicker: 'text-orange-300/80' },
  Event:        { icon: 'fa-solid fa-calendar-star', accent: 'border-sky-300/20 from-sky-400/50',    badge: 'border-sky-300/20 bg-sky-400/10 text-sky-200',       kicker: 'text-sky-300/80' },
  Program:      { icon: 'fa-solid fa-layer-group',   accent: 'border-violet-300/20 from-violet-400/50', badge: 'border-violet-300/20 bg-violet-400/10 text-violet-200', kicker: 'text-violet-300/80' },
  Theme:        { icon: 'fa-solid fa-palette',       accent: 'border-teal-300/20 from-teal-400/50',  badge: 'border-teal-300/20 bg-teal-400/10 text-teal-200',     kicker: 'text-teal-300/80' },
  'Quality Tier': { icon: 'fa-solid fa-gauge-high',  accent: 'border-amber-300/20 from-amber-400/50', badge: 'border-amber-300/20 bg-amber-400/10 text-amber-200',   kicker: 'text-amber-300/80' },
}

function ContextSignalCard({ item }) {
  const typeStyle = CONTEXT_SIGNAL_TYPES[item.meta] ?? { icon: 'fa-solid fa-circle-info', accent: 'border-white/10 from-slate-400/30', badge: 'border-white/10 bg-white/[0.05] text-slate-300', kicker: 'text-sky-200/80' }
  const wrapperClassName = `relative overflow-hidden flex h-full flex-col gap-3 rounded-[24px] border ${typeStyle.accent.split(' ')[0]} bg-white/[0.04] p-5 transition hover:bg-white/[0.07]`

  const body = (
    <>
      <div className={`absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r ${typeStyle.accent.split(' ')[1]} via-transparent to-transparent`} />
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <div className={`flex h-8 w-8 items-center justify-center rounded-xl border ${typeStyle.badge}`}>
            <i className={`${typeStyle.icon} text-[11px]`} />
          </div>
          <span className={`rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] ${typeStyle.badge}`}>{item.meta}</span>
        </div>
        {item.kicker ? <span className={`text-[11px] font-semibold uppercase tracking-[0.16em] ${typeStyle.kicker}`}>{item.kicker}</span> : null}
      </div>
      <div>
        <h3 className="text-lg font-semibold text-white">{item.title}</h3>
        {item.subtitle ? <p className="mt-1 text-sm text-slate-400">{item.subtitle}</p> : null}
      </div>
      {item.description ? <p className="text-sm leading-relaxed text-slate-300">{item.description}</p> : null}
    </>
  )

  if (item.url) {
    return <a href={item.url} className={wrapperClassName}>{body}</a>
  }

  return <div className={wrapperClassName}>{body}</div>
}

export default function CollectionShow() {
  const { props } = usePage()
  const {
    collection: initialCollection,
    artworks,
    owner,
    isOwner,
    manageUrl,
    editUrl,
    analyticsUrl,
    historyUrl,
    profileCollectionsUrl,
    featuredCollectionsUrl,
    engagement,
    seo,
    members: initialMembers,
    comments: initialComments,
    submissions: initialSubmissions,
    entityLinks,
    relatedCollections,
    commentsEndpoint,
    submitEndpoint,
    submissionArtworkOptions,
    seriesContext,
    canSubmit,
    canComment,
    reportEndpoint,
  } = props
  const [collection, setCollection] = React.useState(initialCollection)
  const [comments, setComments] = React.useState(initialComments || [])
  const [submissions, setSubmissions] = React.useState(initialSubmissions || [])
  const [selectedArtworkId, setSelectedArtworkId] = React.useState(submissionArtworkOptions?.[0]?.id || '')
  const [state, setState] = React.useState({
    liked: Boolean(engagement?.liked),
    following: Boolean(engagement?.following),
    saved: Boolean(engagement?.saved),
    notice: '',
    busy: false,
  })
  const artworkItems = artworks?.data ?? []
  const creatorIds = Array.from(new Set(artworkItems.map((artwork) => artwork?.author?.id).filter(Boolean)))
  const featuringCreatorsCount = creatorIds.length
  const showArtworkAuthors = collection?.type !== 'personal' || featuringCreatorsCount > 1
  const enabledModules = Array.isArray(collection?.layout_modules)
    ? collection.layout_modules.filter((module) => module?.enabled !== false)
    : []
  const enabledModuleKeys = new Set(enabledModules.map((module) => module?.key).filter(Boolean))
  const showIntroBlock = enabledModuleKeys.size === 0 || enabledModuleKeys.has('intro_block')
  const metaOwnerName = owner?.name || owner?.username || collection?.owner?.name || 'Skinbase Curator'
  const metaTitle = seo?.title || `${collection?.title} — Skinbase Nova`
  const metaDescription = seo?.description || collection?.summary || collection?.description || ''
  const collectionSchema = seo?.canonical ? {
    '@context': 'https://schema.org',
    '@type': 'CollectionPage',
    name: collection?.title,
    description: metaDescription,
    url: seo.canonical,
    image: seo?.og_image || collection?.cover_image || undefined,
    isPartOf: {
      '@type': 'WebSite',
      name: 'Skinbase Nova',
      url: typeof window !== 'undefined' ? window.location.origin : undefined,
    },
    author: owner ? {
      '@type': 'Person',
      name: metaOwnerName,
      url: owner.profile_url,
    } : undefined,
    keywords: [collection?.type, collection?.mode, collection?.badge_label].filter(Boolean).join(', ') || undefined,
    mainEntity: {
      '@type': 'ItemList',
      numberOfItems: collection?.artworks_count || artworkItems.length || 0,
      itemListElement: artworkItems.slice(0, 12).map((artwork, index) => ({
        '@type': 'ListItem',
        position: index + 1,
        url: artwork.url,
        name: artwork.title,
      })),
    },
  } : null
  const [members] = React.useState(initialMembers || [])
  const spotlightClasses = getSpotlightClasses(collection?.spotlight_style)
  const groupedEntityLinks = groupEntityLinks(entityLinks)
  const storyLinks = groupedEntityLinks.story || []
  const taxonomyLinks = [...(groupedEntityLinks.category || []), ...(groupedEntityLinks.tag || [])]
  const contributorLinks = [...(groupedEntityLinks.creator || []), ...(groupedEntityLinks.artwork || [])]
  const linkedContextSignals = [
    ...(groupedEntityLinks.campaign || []).map((item) => ({
      meta: item.meta || 'Campaign',
      kicker: item.relationship_type || 'Linked campaign',
      title: item.title,
      subtitle: item.subtitle,
      description: item.description,
      url: item.url,
    })),
    ...(groupedEntityLinks.event || []).map((item) => ({
      meta: item.meta || 'Event',
      kicker: item.relationship_type || 'Linked event',
      title: item.title,
      subtitle: item.subtitle,
      description: item.description,
      url: item.url,
    })),
  ]
  const contextSignals = [
    collection?.campaign_key ? {
      meta: 'Campaign',
      kicker: 'Discover surface',
      title: collection.campaign_label || humanizeToken(collection.campaign_key),
      subtitle: collection.campaign_key,
      description: 'This collection is programmed into a campaign surface and can be explored alongside other campaign-ready sets.',
      url: `/collections/campaigns/${encodeURIComponent(collection.campaign_key)}`,
    } : null,
    collection?.program_key ? {
      meta: 'Program',
      kicker: 'Partner context',
      title: humanizeToken(collection.program_key),
      subtitle: collection.partner_label || collection.partner_key || 'Collection program',
      description: 'This collection is attached to a program or partner-ready surface, which affects how it is grouped and surfaced.',
      url: `/collections/program/${encodeURIComponent(collection.program_key)}`,
    } : null,
    (collection?.event_label || collection?.event_key) ? {
      meta: 'Event',
      kicker: 'Seasonal context',
      title: collection.event_label || humanizeToken(collection.event_key),
      subtitle: collection.season_key ? `Season ${humanizeToken(collection.season_key)}` : 'Event-linked collection',
      description: 'This collection is tied to an event or seasonal programming window, so related recommendations favor matching event context.',
      url: null,
    } : null,
    collection?.theme_token ? {
      meta: 'Theme',
      kicker: 'Visual language',
      title: humanizeToken(collection.theme_token),
      subtitle: collection.presentation_style ? `Presentation ${humanizeToken(collection.presentation_style)}` : null,
      description: 'Theme and presentation signals help similar collections cluster together in discovery and recommendation surfaces.',
      url: `/collections/search?theme=${encodeURIComponent(collection.theme_token)}`,
    } : null,
    collection?.trust_tier ? {
      meta: 'Quality Tier',
      kicker: 'Placement signal',
      title: humanizeToken(collection.trust_tier),
      subtitle: collection?.quality_score != null ? `Quality score ${Number(collection.quality_score).toFixed(1)}` : null,
      description: 'Trust tier and quality score shape how aggressively this collection can be used in premium or partner-facing placements.',
      url: `/collections/search?quality_tier=${encodeURIComponent(collection.trust_tier)}`,
    } : null,
    ...linkedContextSignals,
  ].filter(Boolean).filter((item, index, items) => {
    const key = `${item.meta}:${item.title}:${item.subtitle || ''}`
    return items.findIndex((candidate) => `${candidate.meta}:${candidate.title}:${candidate.subtitle || ''}` === key) === index
  })
  const heroMetrics = [
    {
      icon: 'fa-images',
      label: 'Artworks',
      value: (collection?.artworks_count ?? 0).toLocaleString(),
      helper: showArtworkAuthors && featuringCreatorsCount > 1 ? `${featuringCreatorsCount} creators featured` : (collection?.mode === 'smart' ? 'Matched works' : 'Published pieces'),
      tone: 'sky',
    },
    {
      icon: 'fa-heart',
      label: 'Likes',
      value: (collection?.likes_count ?? 0).toLocaleString(),
      helper: 'Community response',
      tone: 'rose',
    },
    {
      icon: 'fa-bell',
      label: 'Followers',
      value: (collection?.followers_count ?? 0).toLocaleString(),
      helper: 'Watching updates',
      tone: 'emerald',
    },
    {
      icon: 'fa-eye',
      label: 'Views',
      value: (collection?.views_count ?? 0).toLocaleString(),
      helper: 'Detail visits',
      tone: 'violet',
    },
    {
      icon: 'fa-bookmark',
      label: 'Saves',
      value: (collection?.saves_count ?? 0).toLocaleString(),
      helper: 'Pinned for later',
      tone: 'amber',
    },
  ]
  const heroSignals = [
    collection?.quality_score != null ? {
      icon: 'fa-gauge-high',
      label: 'Quality',
      value: Number(collection.quality_score).toFixed(1),
      description: collection?.trust_tier ? `${humanizeToken(collection.trust_tier)} placement tier` : 'Placement quality signal',
      tone: 'emerald',
    } : null,
    collection?.ranking_score != null ? {
      icon: 'fa-ranking-star',
      label: 'Ranking',
      value: Number(collection.ranking_score).toFixed(1),
      description: 'Current discovery momentum score',
      tone: 'amber',
    } : null,
    collection?.presentation_style && collection.presentation_style !== 'standard' ? {
      icon: 'fa-panorama',
      label: 'Presentation',
      value: humanizeToken(collection.presentation_style),
      description: 'Visual treatment for this collection surface',
      tone: 'sky',
    } : null,
    collection?.campaign_key ? {
      icon: 'fa-bullhorn',
      label: 'Campaign',
      value: collection.campaign_label || humanizeToken(collection.campaign_key),
      description: 'Programmed into a campaign surface',
      tone: 'rose',
    } : null,
  ].filter(Boolean)

  const { share } = useWebShare({
    onFallback: async ({ url }) => {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(url)
        setState((current) => ({ ...current, notice: 'Collection link copied.' }))
      }
    },
  })

  async function handleLike() {
    if (!engagement?.can_interact) {
      if (engagement?.login_url) window.location.assign(engagement.login_url)
      return
    }

    setState((current) => ({ ...current, busy: true, notice: '' }))
    try {
      const payload = await requestJson(state.liked ? engagement.unlike_url : engagement.like_url, {
        method: state.liked ? 'DELETE' : 'POST',
      })
      setState((current) => ({ ...current, liked: Boolean(payload?.liked), busy: false }))
      setCollection((current) => ({ ...current, likes_count: payload?.likes_count ?? current.likes_count }))
    } catch (error) {
      setState((current) => ({ ...current, busy: false, notice: error.message }))
    }
  }

  async function handleFollow() {
    if (!engagement?.can_interact) {
      if (engagement?.login_url) window.location.assign(engagement.login_url)
      return
    }

    setState((current) => ({ ...current, busy: true, notice: '' }))
    try {
      const payload = await requestJson(state.following ? engagement.unfollow_url : engagement.follow_url, {
        method: state.following ? 'DELETE' : 'POST',
      })
      setState((current) => ({ ...current, following: Boolean(payload?.following), busy: false }))
      setCollection((current) => ({ ...current, followers_count: payload?.followers_count ?? current.followers_count }))
    } catch (error) {
      setState((current) => ({ ...current, busy: false, notice: error.message }))
    }
  }

  async function handleShare() {
    try {
      const payload = await requestJson(engagement?.share_url, { method: 'POST' })
      setCollection((current) => ({ ...current, shares_count: payload?.shares_count ?? current.shares_count }))
      await share({
        title: collection?.title,
        text: collection?.summary || collection?.description || `Explore ${collection?.title} on Skinbase Nova.`,
        url: collection?.public_url,
      })
    } catch (error) {
      setState((current) => ({ ...current, notice: error.message }))
    }
  }

  async function handleSave() {
    if (!engagement?.save_url) {
      if (engagement?.login_url) window.location.assign(engagement.login_url)
      return
    }

    setState((current) => ({ ...current, busy: true, notice: '' }))
    try {
      const payload = await requestJson(state.saved ? engagement.unsave_url : engagement.save_url, {
        method: state.saved ? 'DELETE' : 'POST',
        body: state.saved ? undefined : {
          context: 'collection_detail',
          context_meta: {
            collection_type: collection?.type || null,
            collection_mode: collection?.mode || null,
          },
        },
      })
      setState((current) => ({ ...current, saved: Boolean(payload?.saved), busy: false }))
      setCollection((current) => ({ ...current, saves_count: payload?.saves_count ?? current.saves_count }))
    } catch (error) {
      setState((current) => ({ ...current, busy: false, notice: error.message }))
    }
  }

  async function handleCommentSubmit(body) {
    const payload = await requestJson(commentsEndpoint, {
      method: 'POST',
      body: { body },
    })
    setComments(payload?.comments || [])
    setCollection((current) => ({ ...current, comments_count: payload?.comments_count ?? current.comments_count }))
  }

  async function handleDeleteComment(commentId) {
    const payload = await requestJson(`${commentsEndpoint}/${commentId}`, { method: 'DELETE' })
    setComments(payload?.comments || [])
    setCollection((current) => ({ ...current, comments_count: payload?.comments_count ?? current.comments_count }))
  }

  async function handleSubmitArtwork() {
    if (!submitEndpoint || !selectedArtworkId) return

    try {
      const payload = await requestJson(submitEndpoint, {
        method: 'POST',
        body: { artwork_id: selectedArtworkId },
      })
      setSubmissions(payload?.submissions || [])
      setState((current) => ({ ...current, notice: 'Artwork submitted for review.' }))
    } catch (error) {
      setState((current) => ({ ...current, notice: error.message }))
    }
  }

  async function handleSubmissionAction(submission, action) {
    const url = action === 'approve'
      ? `/collections/submissions/${submission.id}/approve`
      : action === 'reject'
        ? `/collections/submissions/${submission.id}/reject`
        : `/collections/submissions/${submission.id}`

    const payload = await requestJson(url, {
      method: action === 'withdraw' ? 'DELETE' : 'POST',
    })

    setSubmissions(payload?.submissions || [])
    if (action === 'approve') {
      setCollection((current) => ({ ...current, artworks_count: (current?.artworks_count ?? 0) + 1 }))
    }
  }

  async function handleReport(targetType, targetId) {
    if (!reportEndpoint) {
      if (engagement?.login_url) window.location.assign(engagement.login_url)
      return
    }

    const reason = window.prompt('Why are you reporting this? (required)')
    if (!reason || !reason.trim()) return

    try {
      await requestJson(reportEndpoint, {
        method: 'POST',
        body: {
          target_type: targetType,
          target_id: targetId,
          reason: reason.trim(),
        },
      })
      setState((current) => ({ ...current, notice: 'Report submitted. Thank you.' }))
    } catch (error) {
      setState((current) => ({ ...current, notice: error.message }))
    }
  }

  function renderModule(module) {
    if (!module?.key) return null

    if (module.key === 'intro_block') {
      return null
    }

    if (module.key === 'featured_artworks') {
      if (!artworkItems.length) return null

      return (
        <PageSection icon="fa-star" eyebrow="Highlights" title="Featured artworks" count={Math.min(artworkItems.length, 3)}>
          <div className="space-y-4">
            <p className="text-sm leading-relaxed text-slate-300">
              Start with the standout pieces from this collection before diving into the full sequence.
            </p>
            <ArtworkGallery items={artworkItems.slice(0, 3)} showAuthor={showArtworkAuthors} className="grid-cols-1 gap-5 md:grid-cols-3" />
          </div>
        </PageSection>
      )
    }

    if (module.key === 'editorial_note') {
      if (collection?.type !== 'editorial') return null

      return (
        <PageSection icon="fa-pen-nib" eyebrow="Editorial" title="Editorial context">
          <div className="space-y-3 text-sm leading-relaxed text-slate-300">
            <div className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4">
              {collection?.description || 'A staff-curated collection prepared for premium discovery placement.'}
            </div>
            {(collection?.event_label || collection?.badge_label) ? (
              <div className="flex flex-wrap gap-2">
                {collection?.event_label ? <span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.05] px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white">{collection.event_label}</span> : null}
                {collection?.badge_label ? <span className="inline-flex items-center rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100">{collection.badge_label}</span> : null}
              </div>
            ) : null}
          </div>
        </PageSection>
      )
    }

    if (module.key === 'artwork_grid') {
      return (
        <section>
          {artworkItems.length ? <ArtworkGallery items={artworkItems} showAuthor={showArtworkAuthors} className="grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" /> : <EmptyCollectionState isOwner={isOwner} smart={collection?.mode === 'smart'} />}

          {(artworks?.links?.prev || artworks?.links?.next) ? (
            <div className="mt-8 flex items-center justify-between gap-4">
              <a href={artworks?.links?.prev || '#'} className={`inline-flex items-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition ${artworks?.links?.prev ? 'border-white/12 bg-white/[0.05] text-white hover:bg-white/[0.08]' : 'pointer-events-none border-white/8 bg-white/[0.02] text-slate-500'}`}><i className="fa-solid fa-arrow-left fa-fw" />Previous</a>
              <a href={artworks?.links?.next || '#'} className={`inline-flex items-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition ${artworks?.links?.next ? 'border-white/12 bg-white/[0.05] text-white hover:bg-white/[0.08]' : 'pointer-events-none border-white/8 bg-white/[0.02] text-slate-500'}`}>Next<i className="fa-solid fa-arrow-right fa-fw" /></a>
            </div>
          ) : null}
        </section>
      )
    }

    if (module.key === 'discussion') {
      if (!collection?.allow_comments) return null

      return (
        <PageSection icon="fa-comments" eyebrow="Discussion" title="Collection comments" count={(collection?.comments_count ?? comments.length).toLocaleString()}>
          {canComment ? <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4"><CommentForm onSubmit={handleCommentSubmit} placeholder="Talk about the curation, mood, or standout pieces…" submitLabel="Post comment" /></div> : null}
          <div className={canComment ? 'mt-5' : ''}>
            <CommentList comments={comments} canReply={false} onDelete={handleDeleteComment} onReport={(comment) => handleReport('collection_comment', comment.id)} emptyMessage="No comments yet." />
          </div>
        </PageSection>
      )
    }

    if (module.key === 'related_collections') {
      if (!Array.isArray(relatedCollections) || !relatedCollections.length) return null

      return (
        <PageSection icon="fa-layer-group" eyebrow="More to Explore" title="Related collections">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            {relatedCollections.map((item) => (
              <div key={item.id} className="space-y-3">
                <div className="flex flex-wrap gap-2">
                  {recommendationReasons(collection, item).map((reason) => (
                    <span key={`${item.id}-${reason}`} className="inline-flex items-center rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold text-sky-100">
                      {reason}
                    </span>
                  ))}
                </div>
                <CollectionCard collection={item} isOwner={false} />
              </div>
            ))}
          </div>
        </PageSection>
      )
    }

    if (module.key === 'collaborators') {
      return (
        <PageSection icon="fa-users" eyebrow="Contributors" title="Curation team">
          <div className="space-y-3">
            {members.length ? members.filter((member) => member?.status === 'active').map((member) => <CollaboratorCard key={member.id} member={member} />) : <p className="text-sm text-slate-400">This collection is curated by a single owner right now.</p>}
          </div>
        </PageSection>
      )
    }

    if (module.key === 'submissions') {
      if (!collection?.allow_submissions) return null

      return (
        <PageSection icon="fa-paper-plane" eyebrow="Submissions" title="Submit to this collection">
          {canSubmit && submissionArtworkOptions?.length ? (
            <div className="space-y-3">
              <NovaSelect value={String(selectedArtworkId || '')} onChange={(val) => setSelectedArtworkId(val)} placeholder="Select artwork" options={submissionArtworkOptions.map((a) => ({ value: String(a.id), label: a.title }))} />
              <button type="button" onClick={handleSubmitArtwork} className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15"><i className="fa-solid fa-paper-plane fa-fw" />Submit artwork</button>
            </div>
          ) : (
            <p className="text-sm text-slate-400">Sign in with at least one artwork on your account to submit here.</p>
          )}
          <div className="mt-5 space-y-3">
            {submissions.length ? submissions.map((submission) => (
              <SubmissionCard
                key={submission.id}
                submission={submission}
                onApprove={(item) => handleSubmissionAction(item, 'approve')}
                onReject={(item) => handleSubmissionAction(item, 'reject')}
                onWithdraw={(item) => handleSubmissionAction(item, 'withdraw')}
                onReport={(item) => handleReport('collection_submission', item.id)}
              />
            )) : <p className="text-sm text-slate-400">No submissions yet.</p>}
          </div>
        </PageSection>
      )
    }

    return null
  }

  const renderedFullModules = enabledModules.filter((module) => module.slot === 'full').map(renderModule).filter(Boolean)
  const renderedMainModules = enabledModules.filter((module) => module.slot === 'main').map(renderModule).filter(Boolean)
  const renderedSidebarModules = enabledModules.filter((module) => module.slot === 'sidebar').map(renderModule).filter(Boolean)

  return (
    <>
      <SeoHead seo={seo} title={metaTitle} description={metaDescription} jsonLd={collectionSchema} />

      <div className="relative min-h-screen overflow-hidden pb-16">
        <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[36rem] opacity-95" style={{ background: 'radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 32%), radial-gradient(circle at 82% 10%, rgba(249,115,22,0.18), transparent 26%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #08111f 100%)' }} />
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 opacity-[0.05]" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '180px' }} />

        <div className="mx-auto max-w-7xl px-4 pt-8 md:px-6">
          <div className="flex flex-wrap items-center gap-3 text-sm text-slate-300">
            <a href={profileCollectionsUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
              <i className="fa-solid fa-arrow-left fa-fw text-[11px]" />
              Back to collections
            </a>
            {isOwner && manageUrl ? <a href={manageUrl} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 font-semibold text-sky-100 transition hover:bg-sky-400/15"><i className="fa-solid fa-grip fa-fw text-[11px]" />Manage artworks</a> : null}
            {isOwner && editUrl ? <a href={editUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white"><i className="fa-solid fa-pen-to-square fa-fw text-[11px]" />Edit details</a> : null}
            {isOwner && analyticsUrl ? <a href={analyticsUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white"><i className="fa-solid fa-chart-column fa-fw text-[11px]" />Analytics</a> : null}
            {isOwner && historyUrl ? <a href={historyUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white"><i className="fa-solid fa-timeline fa-fw text-[11px]" />History</a> : null}
          </div>

          <section className="mt-6 overflow-hidden rounded-[34px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] shadow-[0_30px_90px_rgba(2,6,23,0.32)] backdrop-blur-xl">
            {/* Per-type accent top stripe */}
            <div className={`h-[3px] bg-gradient-to-r ${
              collection?.type === 'editorial' ? 'from-amber-400/80 via-amber-400/30 to-transparent' :
              collection?.type === 'community' ? 'from-emerald-400/80 via-emerald-400/30 to-transparent' :
              collection?.mode === 'smart'     ? 'from-sky-400/80 via-sky-400/30 to-transparent' :
              'from-violet-400/80 via-violet-400/30 to-transparent'
            }`} />
            <div className="grid items-start gap-6 p-5 md:p-7 xl:grid-cols-[minmax(0,1.2fr)_420px]">
              <div className="relative self-start overflow-hidden rounded-[28px] border border-white/10 bg-slate-950/60">
                <CollectionCover collection={collection} />
                <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.8),rgba(2,6,23,0.08))]" />
              </div>

              <div className="relative overflow-hidden rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_28%),radial-gradient(circle_at_90%_8%,rgba(251,191,36,0.14),transparent_24%),linear-gradient(180deg,rgba(15,23,42,0.94),rgba(10,18,32,0.92))] px-5 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] md:px-6 md:py-7">
                <div aria-hidden="true" className="pointer-events-none absolute -left-14 top-10 h-36 w-36 rounded-full bg-sky-400/10 blur-3xl" />
                <div aria-hidden="true" className="pointer-events-none absolute -right-10 bottom-8 h-32 w-32 rounded-full bg-amber-300/10 blur-3xl" />
                <div className="relative z-10 flex h-full flex-col justify-between">
                  {collection?.banner_text ? (
                    <div className={`mb-4 inline-flex max-w-full items-center gap-2 rounded-[22px] border px-4 py-3 text-sm font-medium shadow-[0_18px_40px_rgba(2,6,23,0.2)] ${spotlightClasses}`}>
                      <i className="fa-solid fa-sparkles text-[12px]" />
                      <span className="truncate">{collection.banner_text}</span>
                    </div>
                  ) : null}
                  <div className="flex flex-wrap items-center gap-2">
                    {collection?.is_featured ? <span className="inline-flex items-center rounded-full border border-amber-300/25 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100">Featured Collection</span> : null}
                    {collection?.mode === 'smart' ? <span className="inline-flex items-center 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">Smart Collection</span> : null}
                    <TypeBadge collection={collection} />
                    {collection?.event_label ? <span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white">{collection.event_label}</span> : null}
                    {collection?.campaign_label ? <span className="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100">{collection.campaign_label}</span> : null}
                    {collection?.badge_label ? <span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white">{collection.badge_label}</span> : null}
                    {collection?.series_key ? <span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white">Series {collection.series_order ? `#${collection.series_order}` : ''}</span> : null}
                    {isOwner ? <CollectionVisibilityBadge visibility={collection?.visibility} /> : null}
                  </div>
                  <h1 className="mt-4 max-w-3xl text-4xl font-black tracking-[-0.06em] text-white md:text-5xl xl:text-[4rem] xl:leading-[0.92]">{collection?.title}</h1>
                  {showIntroBlock ? (
                    <>
                      {collection?.subtitle ? <p className="mt-3 text-lg text-slate-300 md:text-xl">{collection.subtitle}</p> : null}
                      {collection?.summary || collection?.description ? <p className="mt-4 max-w-2xl text-sm leading-relaxed text-slate-300 md:text-[15px]">{collection?.summary || collection?.description}</p> : <p className="mt-4 max-w-2xl text-sm leading-relaxed text-slate-400 md:text-[15px]">A curated selection from @{owner?.username}, assembled as a focused gallery rather than a simple archive.</p>}
                      {collection?.smart_summary ? <div className="mt-4 max-w-2xl rounded-[22px] border border-sky-300/15 bg-sky-400/[0.07] px-4 py-3 text-sm leading-relaxed text-sky-100/90">{collection.smart_summary}</div> : null}
                      {featuringCreatorsCount > 1 ? <p className="mt-3 text-sm text-slate-300">Featuring artworks by {featuringCreatorsCount} creators.</p> : null}
                    </>
                  ) : null}

                  <div className="mt-7 space-y-3">
                    <div className="flex flex-wrap gap-3">
                      <CollectionHeroAction onClick={handleLike} disabled={state.busy || !engagement?.like_url} icon="fa-heart" label={state.liked ? 'Liked' : 'Like'} tone="rose" active={state.liked} />
                      <CollectionHeroAction onClick={handleFollow} disabled={state.busy || !engagement?.follow_url} icon="fa-bell" label={state.following ? 'Following' : 'Follow'} tone="emerald" active={state.following} />
                      <CollectionHeroAction onClick={handleSave} disabled={state.busy || (!engagement?.save_url && !engagement?.unsave_url)} icon="fa-bookmark" label={state.saved ? 'Saved' : 'Save'} tone="violet" active={state.saved} />
                    </div>
                    <div className="flex flex-wrap gap-3">
                      <CollectionHeroAction onClick={handleShare} icon="fa-share-nodes" label="Share" tone="neutral" compact />
                      {featuredCollectionsUrl ? <CollectionHeroAction href={featuredCollectionsUrl} icon="fa-compass" label="Explore" tone="sky" compact /> : null}
                      {reportEndpoint && !isOwner ? <CollectionHeroAction onClick={() => handleReport('collection', collection?.id)} icon="fa-flag" label="Report" tone="amber" compact /> : null}
                    </div>
                  </div>

                  {state.notice ? <p className="mt-3 text-sm text-sky-100">{state.notice}</p> : null}

                  <OwnerCard owner={owner} collectionType={collection?.type} />
                </div>
              </div>
            </div>
          </section>

          {(heroMetrics.length || heroSignals.length) ? (
            <section className="mt-6 rounded-[30px] 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_70px_rgba(2,6,23,0.22)] backdrop-blur-xl md:p-6">
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Collection Snapshot</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">Stats and placement signals</h2>
                </div>
                <p className="max-w-xl text-sm leading-relaxed text-slate-400">The engagement counters and ranking signals now live outside the hero so the header can stay focused on the artwork, title, and actions.</p>
              </div>

              <div className="mt-6 grid gap-4 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,0.95fr)]">
                <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
                  {heroMetrics.map((item) => (
                    <HeroMetricCard key={item.label} icon={item.icon} label={item.label} value={item.value} helper={item.helper} tone={item.tone} />
                  ))}
                </div>

                {heroSignals.length ? (
                  <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-1">
                    {heroSignals.map((item) => (
                      <HeroSignalCard key={item.label} icon={item.icon} label={item.label} value={item.value} description={item.description} tone={item.tone} />
                    ))}
                  </div>
                ) : null}
              </div>
            </section>
          ) : null}

          {(seriesContext?.url || seriesContext?.previous || seriesContext?.next || (Array.isArray(seriesContext?.siblings) && seriesContext.siblings.length)) ? (
            <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Series</p>
                  <h2 className="mt-2 text-2xl font-semibold text-white">{seriesContext?.title || 'Connected collection sequence'}</h2>
                  {seriesContext?.description ? <p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">{seriesContext.description}</p> : null}
                </div>
                <div className="flex flex-wrap items-center gap-3">
                  {collection?.series_key ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{collection.series_key}</span> : null}
                  {seriesContext?.url ? <a href={seriesContext.url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-list fa-fw text-[10px]" />View full series</a> : null}
                </div>
              </div>

              <div className="mt-6 grid gap-4 lg:grid-cols-2">
                <div className="space-y-4">
                  {seriesContext?.previous ? (
                    <a href={seriesContext.previous.url} className="flex items-center justify-between rounded-[24px] border border-white/10 bg-white/[0.04] px-5 py-4 transition hover:bg-white/[0.07]">
                      <div>
                        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Previous</div>
                        <div className="mt-2 text-lg font-semibold text-white">{seriesContext.previous.title}</div>
                      </div>
                      <i className="fa-solid fa-arrow-left text-slate-500" />
                    </a>
                  ) : null}
                  {seriesContext?.next ? (
                    <a href={seriesContext.next.url} className="flex items-center justify-between rounded-[24px] border border-white/10 bg-white/[0.04] px-5 py-4 transition hover:bg-white/[0.07]">
                      <div>
                        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Next</div>
                        <div className="mt-2 text-lg font-semibold text-white">{seriesContext.next.title}</div>
                      </div>
                      <i className="fa-solid fa-arrow-right text-slate-500" />
                    </a>
                  ) : null}
                </div>

                {Array.isArray(seriesContext?.siblings) && seriesContext.siblings.length ? (
                  <div className="grid gap-4">
                    {seriesContext.siblings.slice(0, 2).map((item) => (
                      <CollectionCard key={item.id} collection={item} isOwner={false} />
                    ))}
                  </div>
                ) : null}
              </div>
            </section>
          ) : null}

          {contextSignals.length ? (
            <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-amber-300/15 bg-amber-400/10 text-amber-300">
                    <i className="fa-solid fa-diagram-project text-sm" />
                  </div>
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-200/80">Related Context</p>
                    <h2 className="mt-1 text-2xl font-semibold text-white">Campaign, event, and quality context</h2>
                  </div>
                </div>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{contextSignals.length}</span>
              </div>

              <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {contextSignals.map((item) => (
                  <ContextSignalCard key={`${item.meta}-${item.title}`} item={item} />
                ))}
              </div>
            </section>
          ) : null}

          {storyLinks.length ? (
            <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-lime-300/15 bg-lime-400/10 text-lime-300">
                    <i className="fa-solid fa-book-open text-sm" />
                  </div>
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-lime-200/80">Stories</p>
                    <h2 className="mt-1 text-2xl font-semibold text-white">Stories and editorial references linked to this collection</h2>
                  </div>
                </div>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{storyLinks.length}</span>
              </div>

              <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {storyLinks.map((item) => (
                  <EntityLinkCard key={`${item.linked_type}-${item.linked_id}-${item.id}`} item={item} />
                ))}
              </div>
            </section>
          ) : null}

          {taxonomyLinks.length ? (
            <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-violet-300/15 bg-violet-400/10 text-violet-300">
                    <i className="fa-solid fa-tags text-sm" />
                  </div>
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-violet-200/80">Browse The Theme</p>
                    <h2 className="mt-1 text-2xl font-semibold text-white">Categories and tags that anchor this collection</h2>
                  </div>
                </div>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{taxonomyLinks.length}</span>
              </div>

              <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {taxonomyLinks.map((item) => (
                  <EntityLinkCard key={`${item.linked_type}-${item.linked_id}-${item.id}`} item={item} />
                ))}
              </div>
            </section>
          ) : null}

          {contributorLinks.length ? (
            <section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-sky-300/15 bg-sky-400/10 text-sky-300">
                    <i className="fa-solid fa-user-group text-sm" />
                  </div>
                  <div>
                    <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Connected Creators</p>
                    <h2 className="mt-1 text-2xl font-semibold text-white">Creators and artworks that give the set its shape</h2>
                  </div>
                </div>
                <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{contributorLinks.length}</span>
              </div>

              <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {contributorLinks.map((item) => (
                  <EntityLinkCard key={`${item.linked_type}-${item.linked_id}-${item.id}`} item={item} />
                ))}
              </div>
            </section>
          ) : null}

          {renderedFullModules.length ? <div className="mt-8 space-y-6">{renderedFullModules}</div> : null}

          {(renderedMainModules.length || renderedSidebarModules.length) ? (
            <section className="mt-8 grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
              <div className="space-y-6">{renderedMainModules}</div>
              <div className="space-y-6">{renderedSidebarModules}</div>
            </section>
          ) : null}
        </div>
      </div>
    </>
  )
}