import React from 'react'
import { motion, useReducedMotion } from 'framer-motion'
import ArchiveScreenshotPicker from '../ArchiveScreenshotPicker'

function stripHtml(value) {
  return String(value || '')
    .replace(/<[^>]*>/g, ' ')
    .replace(/&nbsp;/g, ' ')
    .replace(/\s+/g, ' ')
    .trim()
}

/**
 * PublishCheckBadge – a single status item for the review section
 */
function PublishCheckBadge({ label, ok }) {
  return (
    <span
      className={[
        'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs',
        ok
          ? 'border-emerald-300/40 bg-emerald-500/12 text-emerald-100'
          : 'border-white/15 bg-white/5 text-white/55',
      ].join(' ')}
    >
      <span aria-hidden="true">{ok ? '✓' : '○'}</span>
      {label}
    </span>
  )
}

/**
 * Step3Publish
 *
 * Step 3 of the upload wizard: review summary and publish action.
 * Shows a compact artwork preview, metadata summary, readiness badges,
 * and a summary of publish mode / schedule + visibility.
 *
 * Publish controls (mode/schedule picker) live in PublishPanel (sidebar).
 * This step serves as the final review before the user clicks Publish.
 */
export default function Step3Publish({
  headingRef,
  // Asset
  primaryFile,
  primaryPreviewUrl,
  isArchive,
  screenshots,
  selectedScreenshotIndex,
  onSelectedScreenshotChange,
  fileMetadata,
  // Metadata
  metadata,
  // Readiness
  canPublish,
  uploadReady,
  // Publish options (from wizard state, for summary display only)
  publishMode = 'now',
  scheduledAt = null,
  timezone = null,
  visibility = 'public',
  onVisibilityChange,
  selectedGroup = null,
  currentContributorOptions = [],
  actionLabel = 'Publish now',
  showScheduleSummary = true,
  // Category tree (for label lookup)
  allRootCategoryOptions = [],
  filteredCategoryTree = [],
}) {
  const prefersReducedMotion = useReducedMotion()
  const quickTransition = prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }

  const hasPreview = Boolean(primaryPreviewUrl && !isArchive)

  // ── Category label lookup ────────────────────────────────────────────────
  const rootCategory = allRootCategoryOptions.find(
    (r) => String(r.id) === String(metadata.rootCategoryId)
  ) ?? null
  const rootLabel = rootCategory?.name ?? null
  const subCategory = rootCategory?.children?.find(
    (c) => String(c.id) === String(metadata.subCategoryId)
  ) ?? null
  const subLabel = subCategory?.name ?? null
  const descriptionPreview = stripHtml(metadata.description)
  const primaryAuthor = (Array.isArray(currentContributorOptions) ? currentContributorOptions : []).find(
    (user) => Number(user.id) === Number(metadata.primaryAuthorUserId)
  ) ?? null
  const contributorCredits = metadata.contributorCredits || {}
  const contributors = (Array.isArray(currentContributorOptions) ? currentContributorOptions : [])
    .filter((user) => Array.isArray(metadata.contributorUserIds) && metadata.contributorUserIds.some((id) => Number(id) === Number(user.id)))
    .map((user) => {
      const creditMeta = contributorCredits?.[user.id] || contributorCredits?.[String(user.id)] || { creditRole: '', isPrimary: false }

      return {
        ...user,
        creditRole: creditMeta.creditRole || '',
        isPrimary: Boolean(creditMeta.isPrimary),
      }
    })

  const checks = [
    { label: 'File uploaded', ok: uploadReady },
    { label: 'Scan passed', ok: uploadReady },
    { label: 'Preview ready', ok: hasPreview || (isArchive && screenshots.length > 0) },
    { label: 'Rights confirmed', ok: Boolean(metadata.rightsAccepted) },
    { label: 'Tags added', ok: Array.isArray(metadata.tags) && metadata.tags.length > 0 },
  ]

  return (
    <div className="space-y-5 rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-6 shadow-[0_24px_90px_rgba(2,8,23,0.28)] backdrop-blur sm:p-7">
      {/* Step header */}
      <div className="rounded-2xl border border-white/8 bg-white/[0.04] px-5 py-4">
        <h2
          ref={headingRef}
          tabIndex={-1}
          className="text-lg font-semibold text-white focus:outline-none"
        >
          Review & publish
        </h2>
        <p className="mt-1 text-sm text-white/60">
          Everything looks good? Hit <span className="text-white/85">Publish</span> to make your artwork live.
        </p>
      </div>

      {/* Preview + summary */}
      <div className="rounded-2xl ring-1 ring-white/8 bg-white/[0.025] p-5">
        <div className="flex flex-col gap-4 sm:flex-row">
          {/* Artwork thumbnail */}
          <div className="shrink-0">
            {hasPreview ? (
              <div className="flex h-[140px] w-[140px] items-center justify-center overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30">
                <img
                  src={primaryPreviewUrl}
                  alt="Artwork preview"
                  className="max-h-full max-w-full object-contain"
                  loading="lazy"
                  decoding="async"
                  width={140}
                  height={140}
                />
              </div>
            ) : (
              <div className="grid h-[140px] w-[140px] place-items-center rounded-xl ring-1 ring-white/10 bg-white/5 text-white/40">
                <svg className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                </svg>
              </div>
            )}
          </div>

          {/* Summary */}
          <div className="min-w-0 flex-1 space-y-2.5">
            <p className="text-base font-semibold text-white leading-snug">
              {metadata.title || <span className="text-white/45 italic">Untitled artwork</span>}
            </p>

            <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/55">
              {metadata.contentType && (
                <span className="capitalize">Type: <span className="text-white/75">{metadata.contentType}</span></span>
              )}
              {rootLabel && (
                <span>Category: <span className="text-white/75">{rootLabel}</span></span>
              )}
              {subLabel && (
                <span>Sub: <span className="text-white/75">{subLabel}</span></span>
              )}
            </div>

            <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/55">
              <span>Tags: <span className="text-white/75">{(metadata.tags || []).length}</span></span>
              <span>Audience: <span className="text-white/75">{metadata.isMature ? 'Mature' : 'General'}</span></span>
              {selectedGroup ? <span>Publisher: <span className="text-white/75">{selectedGroup.name}</span></span> : <span>Publisher: <span className="text-white/75">Personal profile</span></span>}
              {!isArchive && fileMetadata?.resolution && fileMetadata.resolution !== '—' && (
                <span>Resolution: <span className="text-white/75">{fileMetadata.resolution}</span></span>
              )}
              {isArchive && (
                <span>Screenshots: <span className="text-white/75">{screenshots.length}</span></span>
              )}
            </div>

            {(selectedGroup || primaryAuthor || contributors.length > 0) && (
              <div className="space-y-2 text-xs text-white/55">
                {primaryAuthor ? <span>Primary author: <span className="text-white/75">{primaryAuthor.name || primaryAuthor.username}</span></span> : null}
                {contributors.length > 0 ? (
                  <div>
                    <span>Contributors:</span>
                    <div className="mt-1 flex flex-wrap gap-2">
                      {contributors.map((user) => (
                        <span key={user.id} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white/80">
                          <span>{user.name || user.username}</span>
                          {user.creditRole ? <span className="text-white/50">{user.creditRole}</span> : null}
                          {user.isPrimary ? <span className="rounded-full border border-emerald-300/30 bg-emerald-400/12 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Lead support</span> : null}
                        </span>
                      ))}
                    </div>
                  </div>
                ) : null}
              </div>
            )}

            {descriptionPreview && (
              <p className="line-clamp-2 text-xs text-white/50">{descriptionPreview}</p>
            )}
          </div>
        </div>

        {isArchive && screenshots.length > 0 && (
          <div className="mt-5 border-t border-white/8 pt-5">
            <ArchiveScreenshotPicker
              screenshots={screenshots}
              selectedIndex={selectedScreenshotIndex}
              onSelect={onSelectedScreenshotChange}
              title="Archive preview"
              description="This screenshot will be used as the default preview once the archive is published."
            />
          </div>
        )}
      </div>

      {/* ── Visibility selector ────────────────────────────────────────── */}
      <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
        <p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Visibility</p>
        <div className="grid gap-2 sm:grid-cols-3">
          {[
            { value: 'public', label: 'Public', hint: 'Visible to everyone' },
            { value: 'unlisted', label: 'Unlisted', hint: 'Available by direct link' },
            { value: 'private', label: 'Private', hint: 'Keep as draft visibility' },
          ].map((option) => {
            const active = visibility === option.value
            return (
              <button
                key={option.value}
                type="button"
                onClick={() => onVisibilityChange?.(option.value)}
                className={[
                  'flex items-start justify-between gap-3 rounded-2xl border px-4 py-3 text-left transition',
                  active
                    ? 'border-sky-300/30 bg-sky-400/10 text-white shadow-[0_0_0_1px_rgba(56,189,248,0.12)]'
                    : 'border-white/10 bg-white/[0.03] text-white/75 hover:border-white/20 hover:bg-white/[0.06]',
                ].join(' ')}
              >
                <div>
                  <div className="text-sm font-semibold">{option.label}</div>
                  <div className="mt-1 text-xs text-white/45">{option.hint}</div>
                </div>
                <span className={[
                  'mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border text-[10px]',
                  active ? 'border-sky-300/40 bg-sky-400/20 text-sky-100' : 'border-white/10 bg-white/5 text-white/30',
                ].join(' ')}>
                  {active ? '✓' : ''}
                </span>
              </button>
            )
          })}
        </div>
      </section>

      {/* Publish summary: schedule info */}
      <div className="flex flex-wrap gap-3">
        <span className="inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-white/6 px-2.5 py-1 text-xs text-white/60">
          👁 {visibility === 'public' ? 'Public' : visibility === 'unlisted' ? 'Unlisted' : 'Private'}
        </span>
        {showScheduleSummary && publishMode === 'schedule' && scheduledAt ? (
          <span className="inline-flex items-center gap-1.5 rounded-full border border-violet-300/30 bg-violet-500/15 px-2.5 py-1 text-xs text-violet-200">
            🕐 Scheduled
            {timezone && (
              <span className="text-violet-300/70">
                {' '}·{' '}
                {new Intl.DateTimeFormat('en-GB', {
                  timeZone: timezone,
                  weekday: 'short', day: 'numeric', month: 'short',
                  hour: '2-digit', minute: '2-digit', hour12: false,
                }).format(new Date(scheduledAt))}
              </span>
            )}
          </span>
        ) : (
          <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-300/30 bg-emerald-500/12 px-2.5 py-1 text-xs text-emerald-200">
            ⚡ {actionLabel}
          </span>
        )}
      </div>

      {/* Readiness badges */}
      <div>
        <p className="mb-2.5 text-xs uppercase tracking-wide text-white/40">Readiness checks</p>
        <div className="flex flex-wrap gap-2">
          {checks.map((check) => (
            <PublishCheckBadge key={check.label} label={check.label} ok={check.ok} />
          ))}
        </div>
      </div>

      {/* Not-ready notice */}
      {!canPublish && (
        <motion.div
          initial={prefersReducedMotion ? false : { opacity: 0, y: 4 }}
          animate={{ opacity: 1, y: 0 }}
          transition={quickTransition}
          className="rounded-lg ring-1 ring-amber-300/25 bg-amber-500/8 px-4 py-3 text-sm text-amber-100/85"
        >
          {!uploadReady
            ? 'Waiting for upload processing to complete…'
            : !metadata.rightsAccepted
              ? 'Please confirm rights in the Details step to enable publishing.'
              : 'Complete all required fields to enable publishing.'}
        </motion.div>
      )}
    </div>
  )
}
