/**
 * Shared building blocks for the section renderers.
 *
 * NOTE ON STYLING: the components under `sections/` render the consumer's
 * *public website* content (purple hero, white prose bands, etc.), not the
 * admin chrome. They therefore use a small, fixed website palette (violet
 * for primary, zinc for neutrals) instead of the admin theme tokens. This
 * is deliberate and scoped to this folder so the preview looks like a real
 * page; the surrounding editor UI still uses the admin design tokens.
 */
import type { SectionSettings } from '../section-types.js'

/**
 * Live post data passed to the post-oriented section renderers
 * (article body, author bio, related posts). Pages never supply this, so
 * every consumer treats it as optional and falls back to placeholder copy.
 */
export interface PostRenderContext {
  title?: string
  excerpt?: string
  /** the post's main body copy (rendered by the Article Body section) */
  body?: string
  featuredImageUrl?: string
  publishDate?: string | null
  category?: string
  author?: { name?: string; bio?: string; avatarUrl?: string }
  /** resolved related posts for the Related Posts section */
  relatedPosts?: Array<{ title: string; url?: string; excerpt?: string }>
}

export function str(content: Record<string, unknown>, key: string, fallback = ''): string {
  const v = content[key]
  return typeof v === 'string' ? v : fallback
}

export function bool(content: Record<string, unknown>, key: string, fallback = false): boolean {
  const v = content[key]
  return typeof v === 'boolean' ? v : fallback
}

/** Vertical padding scale for a section. */
export function paddingClass(settings: SectionSettings): string {
  switch (settings.paddingY) {
    case 'sm':
      return 'py-8'
    case 'md':
      return 'py-12'
    case 'xl':
      return 'py-20 sm:py-28'
    case 'lg':
    default:
      return 'py-16 sm:py-20'
  }
}

/** Returns true when the section background is the dark/purple treatment. */
export function isDarkBackground(settings: SectionSettings): boolean {
  return (
    (settings.backgroundType === 'solid' || settings.backgroundType === 'gradient') &&
    settings.backgroundColor === 'purple'
  )
}

/** Background utility classes derived from settings. */
export function backgroundClass(settings: SectionSettings): string {
  if (settings.backgroundType === 'gradient' && settings.backgroundColor === 'purple') {
    return 'bg-gradient-to-br from-violet-600 to-violet-700 text-white'
  }
  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'purple') {
    return 'bg-violet-600 text-white'
  }
  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'muted') {
    return 'bg-zinc-50 text-zinc-900'
  }
  return 'bg-white text-zinc-900'
}

/**
 * Preview-only button. `tone="onDark"` renders the white-on-purple button
 * from the screenshot; `tone="primary"` renders a solid violet button for
 * light backgrounds.
 */
export function PreviewButton({
  label,
  href,
  tone = 'primary',
}: {
  label: string
  href?: string
  tone?: 'primary' | 'onDark' | 'ghost'
}) {
  if (!label) return null
  const base =
    'inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium transition-colors'
  const toneClass =
    tone === 'onDark'
      ? 'bg-white text-violet-700 hover:bg-violet-50'
      : tone === 'ghost'
        ? 'border border-zinc-300 text-zinc-700 hover:bg-zinc-50'
        : 'bg-violet-600 text-white hover:bg-violet-700'
  // Editor preview: links are inert (preventDefault) so clicking content
  // selects the section instead of navigating away.
  return (
    <a
      href={href || '#'}
      onClick={(e) => e.preventDefault()}
      className={`${base} ${toneClass}`}
      tabIndex={-1}
    >
      {label}
    </a>
  )
}
