import { computeReadingTime } from '@actuate-media/cms-core/page-sections'
import type { PostHeaderConfig } from '../page-editor/section-types.js'
import type { PostRenderContext } from '../page-editor/sections/index.js'

interface PostHeaderProps {
  config: PostHeaderConfig
  context: PostRenderContext
}

function formatDate(value?: string | null): string {
  if (!value) return ''
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return ''
  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
}

/**
 * Renders a post's header region from the template's design config plus the
 * post's own field values. Uses the same fixed website palette as the
 * section renderers (see sections/parts.tsx) so the editor canvas and the
 * public preview match.
 */
export function PostHeader({ config, context }: PostHeaderProps) {
  const title = context.title || 'Untitled post'
  const date = config.showDate ? formatDate(context.publishDate) : ''
  const overlay =
    config.layout === 'overlay' && config.showFeaturedImage && context.featuredImageUrl
  const align = config.layout === 'centered' ? 'text-center mx-auto items-center' : 'text-left'

  const meta = (
    <div
      className={`mt-4 flex flex-wrap gap-x-3 gap-y-1 text-sm ${
        config.layout === 'centered' ? 'justify-center' : ''
      } ${overlay ? 'text-white/80' : 'text-zinc-500'}`}
    >
      {config.showCategory && context.category && (
        <span className="font-medium text-violet-500">{context.category}</span>
      )}
      {config.showAuthor && <span>{context.author?.name || 'Author name'}</span>}
      {date && <span>{date}</span>}
      {config.showReadingTime && <span>{computeReadingTime(context.body)} min read</span>}
    </div>
  )

  if (overlay) {
    return (
      <header className="relative">
        <img src={context.featuredImageUrl} alt="" className="h-[360px] w-full object-cover" />
        <div className="absolute inset-0 bg-linear-to-t from-black/70 to-black/10" aria-hidden />
        <div className="absolute inset-x-0 bottom-0 px-6 pb-8">
          <div className={`mx-auto flex max-w-3xl flex-col ${align}`}>
            <h1 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
              {title}
            </h1>
            {config.showExcerpt && context.excerpt && (
              <p className="mt-3 max-w-2xl text-lg text-white/90">{context.excerpt}</p>
            )}
            {meta}
          </div>
        </div>
      </header>
    )
  }

  return (
    <header className="bg-white px-6 pt-12 pb-2">
      <div
        className={`flex max-w-3xl flex-col ${align} ${config.layout === 'centered' ? 'mx-auto' : ''}`}
      >
        <h1 className="text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl">{title}</h1>
        {config.showExcerpt && context.excerpt && (
          <p className="mt-3 max-w-2xl text-lg text-zinc-600">{context.excerpt}</p>
        )}
        {meta}
      </div>
      {config.showFeaturedImage && context.featuredImageUrl && (
        <div className="mx-auto mt-8 max-w-4xl">
          <img
            src={context.featuredImageUrl}
            alt=""
            className="aspect-video w-full rounded-xl object-cover"
          />
        </div>
      )}
    </header>
  )
}
