"use client"

/**
 * WhatsNewAnnouncementCard — compact release hero for the small What's new sheet.
 *
 * Media header, eyebrow, title, optional highlight rows (icon + title + body),
 * and one full-width primary action. Falls back to a single description paragraph
 * when `highlights` is omitted.
 */

import * as React from "react"

import { cn } from "../../lib/utils"
import { Button } from "./button"
import { Tip } from "./tip"

export interface WhatsNewHighlight {
  /** Font Awesome icon name without style prefix, e.g. `fa-sparkles`. */
  icon: string
  title: string
  body: string
}

export interface WhatsNewAnnouncementCardProps {
  title: string
  eyebrow?: string
  /** Shown as eyebrow when `eyebrow` is absent, e.g. `New in Clinical Education`. */
  sourceLabel?: string
  media?: React.ReactNode
  brandColor?: string
  highlights?: WhatsNewHighlight[]
  description?: string
  primaryActionLabel?: string
  onPrimaryAction?: () => void
  onDismiss?: () => void
  className?: string
  /** Override media region aspect, e.g. `aspect-video` for a shorter sheet hero. */
  mediaClassName?: string
}

function brandMediaWash(color: string): string {
  return `linear-gradient(
    145deg,
    color-mix(in oklch, ${color} 36%, var(--background)) 0%,
    color-mix(in oklch, ${color} 16%, var(--background)) 55%,
    var(--background) 100%
  )`
}

function WhatsNewAnnouncementDismiss({
  title,
  onClick,
}: {
  title: string
  onClick: () => void
}) {
  return (
    <Tip label="Dismiss" side="left">
      <span data-slot="whats-new-announcement-dismiss" className="absolute end-2 top-2 z-10 inline-flex">
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={`Dismiss ${title}`}
          onClick={onClick}
          className="bg-background/95 text-foreground shadow-sm hover:bg-background hover:text-foreground"
        >
          <i className="fa-solid fa-xmark" aria-hidden="true" />
        </Button>
      </span>
    </Tip>
  )
}

export function WhatsNewAnnouncementCard({
  title,
  eyebrow,
  sourceLabel,
  media,
  brandColor = "var(--brand)",
  highlights,
  description,
  primaryActionLabel = "Try it",
  onPrimaryAction,
  onDismiss,
  className,
  mediaClassName,
}: WhatsNewAnnouncementCardProps) {
  const eyebrowText = eyebrow ?? sourceLabel

  return (
    <article
      data-slot="whats-new-announcement-card"
      aria-labelledby="whats-new-announcement-title"
      className={cn("flex min-w-0 flex-col bg-card text-foreground", className)}
    >
      <div
        data-slot="whats-new-announcement-media"
        className={cn(
          "relative w-full shrink-0 overflow-hidden",
          mediaClassName ?? "aspect-[4/3]",
        )}
        style={{ backgroundImage: brandMediaWash(brandColor) }}
      >
        {media ? <div className="relative size-full">{media}</div> : null}
        {onDismiss ? <WhatsNewAnnouncementDismiss title={title} onClick={onDismiss} /> : null}
      </div>

      <div className="flex min-w-0 flex-col gap-4 p-4">
        {eyebrowText ? (
          <p className="text-xs font-medium tracking-[0.06em] text-muted-foreground uppercase">
            {eyebrowText}
          </p>
        ) : null}

        <h2
          id="whats-new-announcement-title"
          className="font-heading text-lg font-semibold leading-snug tracking-tight text-balance"
        >
          {title}
        </h2>

        {highlights && highlights.length > 0 ? (
          <ul className="flex list-none flex-col gap-4 p-0">
            {highlights.map(highlight => (
              <li key={highlight.title} className="flex items-start gap-3">
                <span
                  aria-hidden="true"
                  className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground"
                >
                  <i className={cn("fa-light text-sm", highlight.icon)} />
                </span>
                <span className="flex min-w-0 flex-col gap-0.5">
                  <span className="text-sm font-semibold leading-snug">{highlight.title}</span>
                  <span className="text-sm leading-relaxed text-muted-foreground">
                    {highlight.body}
                  </span>
                </span>
              </li>
            ))}
          </ul>
        ) : description ? (
          <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
        ) : null}

        {onPrimaryAction ? (
          <>
            <div className="h-px bg-border" aria-hidden="true" />
            <Button type="button" className="w-full" onClick={onPrimaryAction}>
              {primaryActionLabel}
            </Button>
          </>
        ) : null}
      </div>
    </article>
  )
}