"use client"

/**
 * MarketingBanner — product marketing promos.
 *
 * • layout="hero" — copy left, visual right from 20rem (Campus More from
 *   Exxat rail and compact Whats New cards). Copy only on a phone-width
 *   stack. Cover media paints behind the copy at every size.
 * • layout="floating" — brand gradient card, same chrome as floating sheet.
 *   - floatingVariant="card" — icon + copy
 *   - floatingVariant="media" — full-bleed media header + copy on gradient
 */

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { FLOATING_SHEET_DESKTOP_WIDTH } from "../../lib/floating-sheet-panel"
import { cn } from "../../lib/utils"
import { Button } from "./button"
import { Tip } from "./tip"

export type MarketingBannerCorner = "bottom-left" | "bottom-right"
export type MarketingBannerFloatingVariant = "card" | "media"
export type MarketingBannerTone = "surface" | "tint" | "gradient"

const MARKETING_FLOATING_CHROME =
  "overflow-hidden rounded-xl border border-brand-dark shadow-[var(--shadow-sheet-panel)]"

/**
 * Opaque brand ramp, readable with `text-brand-foreground` at every stop.
 *
 * The ramp used to open on `brand-color-light`, which is the focus-ring tone
 * (L 0.78) rather than a surface: white ink on it measures 2.04:1, so any copy
 * landing in the top third of the card failed AA. It now starts at `brand`
 * (4.89:1 on the Prism ramp, better on the default one) and descends, so the
 * lightest pixel under the ink still clears normal-text contrast.
 */
const MARKETING_BRAND_GRADIENT =
  "bg-gradient-to-b from-brand via-brand-dark to-brand-deep text-brand-foreground"

export interface MarketingBannerAction {
  label: string
  href?: string
  onClick?: () => void
  /**
   * Renders the action as done rather than removing it.
   *
   * For an offer that can only be taken once — a beta opt-in is the case this
   * exists for — dropping the button on success leaves the banner looking as
   * though nothing happened, and swapping only its label leaves something that
   * still invites a second click it will not honour.
   */
  disabled?: boolean
}

const marketingBannerRootVariants = cva("relative isolate transition-[color,background-color,border-color,box-shadow] duration-150 ease-out", {
  variants: {
    layout: {
      hero: [
        "@container/banner grid w-full max-w-none gap-5 overflow-visible rounded-xl border p-5",
        // Columns are set on the instance below, only when there is a visual
        // to put in the second one. They used to live here, which meant a
        // text-only promo reserved 12rem for nothing: in a half-width column
        // that left the copy 230px of a 512px banner and wrapped every headline.
        // `grid-cols-1` also lives there so it cannot win a source-order fight
        // against the two-column query and stack the illustration under the copy.
        "lg:gap-8 lg:p-7",
      ],
      floating: [
        "fixed z-40 flex flex-col",
        MARKETING_FLOATING_CHROME,
        FLOATING_SHEET_DESKTOP_WIDTH,
        "bottom-4",
      ],
    },
    tone: {
      surface: "border-border bg-card text-foreground",
      tint: [
        "border-brand/12 bg-brand/6 text-foreground",
        "dark:border-brand/20 dark:bg-brand/10",
      ],
      gradient: [MARKETING_BRAND_GRADIENT, "border-brand-dark"],
    },
  },
  defaultVariants: {
    layout: "hero",
    tone: "tint",
  },
})

const marketingBannerCornerClass: Record<MarketingBannerCorner, string> = {
  "bottom-left": "left-4",
  "bottom-right": "right-4",
}

const marketingTitleClassName = "font-heading font-semibold tracking-tight text-balance"

export interface MarketingBannerProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
    VariantProps<typeof marketingBannerRootVariants> {
  layout: "hero" | "floating"
  title: string
  /**
   * Heading level for the hero title. Defaults to `h3`, which is right when the
   * banner sits inside a section that already has its own heading — but a
   * banner placed directly under the page `h1` skips a level there, and axe
   * (correctly) calls that a heading-order violation. Set it to match the
   * outline of the page you are dropping the banner into.
   */
  titleAs?: "h2" | "h3" | "h4"
  eyebrow?: string
  eyebrowIcon?: string
  children?: React.ReactNode
  illustration?: React.ReactNode
  media?: React.ReactNode
  /**
   * `"contain"` (default) centers `media`/`illustration` at its own size —
   * right for vector art (`FeaturedProduct`'s `ProductIllustration`) that is
   * drawn to a deliberate size and looks wrong stretched.
   *
   * `"fill"` stretches the visual column to the row's full height and bleeds
   * it to the card's own top/end/bottom edges, fading in from a soft
   * mask rather than a hard vertical seam — right for a single UI component
   * (a floating Leo window, one KPI card) that illustrates the update
   * without needing the whole card (`WhatsNewSection`'s default). The child
   * supplies its own `object-cover`; this only sizes the frame around it.
   *
   * `"cover"` drops the two-column split entirely and lets `media` fill the
   * *whole* card as a background, with a scrim gradient the copy sits on —
   * right when the screenshot itself is the story (a full dashboard, a
   * whole search result) rather than one component floating beside the
   * copy.
   */
  mediaFit?: "contain" | "fill" | "cover"
  /**
   * Clamps the description to two lines. A one-off hero selling a single
   * idea (`FeaturedProduct`'s tagline) wants the whole sentence; a row of
   * many banners side by side (`WhatsNewSection`) wants every card the same
   * height regardless of whose copy ran long, the way a table row does not
   * grow to fit its longest cell.
   */
  compactDescription?: boolean
  /**
   * Shorter hero chrome for digest rows (`WhatsNewSection`): tighter padding,
   * smaller title, no media-column height floor. Featured / marketing heroes
   * leave this off.
   */
  compact?: boolean
  floatingVariant?: MarketingBannerFloatingVariant
  tone?: MarketingBannerTone
  primaryAction?: MarketingBannerAction
  secondaryAction?: MarketingBannerAction
  /** Renders after primary/secondary on the same actions row (e.g. carousel chevrons). */
  actionsTrailing?: React.ReactNode
  primaryActionFullWidth?: boolean
  dismissible?: boolean
  onDismiss?: () => void
  corner?: MarketingBannerCorner
  decorativeOverlay?: React.ReactNode
}

function MarketingBannerAction({
  action,
  priority,
  fullWidth = false,
  onBrandSurface = false,
}: {
  action: MarketingBannerAction
  priority: "primary" | "secondary"
  fullWidth?: boolean
  onBrandSurface?: boolean
}) {
  const isPrimary = priority === "primary"
  const variant = isPrimary ? (onBrandSurface ? "outline" : "default") : "outline"
  const className = cn(
    "shrink-0",
    fullWidth && isPrimary && "w-full",
    onBrandSurface &&
      isPrimary &&
      "border-foreground bg-card !text-foreground shadow-sm hover:bg-muted hover:!text-foreground aria-expanded:bg-muted aria-expanded:!text-foreground",
    onBrandSurface && !isPrimary && "border-brand-foreground/40 bg-brand-deep text-brand-foreground hover:bg-brand-deep/90",
  )

  if (action.href && !action.disabled) {
    return (
      <Button asChild size="sm" variant={variant} className={className}>
        <a href={action.href}>{action.label}</a>
      </Button>
    )
  }
  return (
    <Button
      type="button"
      size="sm"
      variant={variant}
      className={className}
      disabled={action.disabled}
      onClick={action.onClick}
    >
      {action.label}
    </Button>
  )
}

function MarketingBannerDismiss({
  title,
  onClick,
  className,
  side = "bottom",
  highContrast = false,
}: {
  title: string
  onClick: () => void
  className?: string
  side?: "bottom" | "left" | "top"
  /** Readable on brand gradient / media headers. */
  highContrast?: boolean
}) {
  return (
    <Tip label="Dismiss" side={side}>
      <span data-slot="marketing-banner-dismiss" className={cn("inline-flex", className)}>
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          aria-label={`Dismiss ${title}`}
          onClick={onClick}
          className={cn(
            highContrast &&
              "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>
  )
}

function MarketingBannerEyebrow({
  eyebrow,
  eyebrowIcon,
  onBrandSurface = false,
}: {
  eyebrow: string
  eyebrowIcon?: string
  onBrandSurface?: boolean
}) {
  return (
    <p
      className={cn(
        "flex items-center gap-1.5 text-xs font-medium",
        onBrandSurface ? "text-brand-foreground/85" : "text-muted-foreground",
      )}
    >
      {eyebrowIcon ? (
        <i className={cn("fa-light text-sm", eyebrowIcon)} aria-hidden="true" />
      ) : null}
      {eyebrow}
    </p>
  )
}

function MarketingBannerActions({
  primaryAction,
  secondaryAction,
  actionsTrailing,
  primaryFullWidth = false,
  onBrandSurface = false,
}: {
  primaryAction?: MarketingBannerAction
  secondaryAction?: MarketingBannerAction
  actionsTrailing?: React.ReactNode
  primaryFullWidth?: boolean
  onBrandSurface?: boolean
}) {
  if (!primaryAction && !secondaryAction && !actionsTrailing) return null

  if (actionsTrailing) {
    return (
      <div
        className="flex w-full flex-nowrap items-center justify-between gap-2 pt-0.5"
        data-slot="marketing-banner-actions"
      >
        <div className="flex shrink-0 flex-nowrap items-center gap-2">
          {primaryAction ? (
            <MarketingBannerAction
              action={primaryAction}
              priority="primary"
              fullWidth={false}
              onBrandSurface={onBrandSurface}
            />
          ) : null}
          {secondaryAction ? (
            <MarketingBannerAction
              action={secondaryAction}
              priority="secondary"
              onBrandSurface={onBrandSurface}
            />
          ) : null}
        </div>
        <div className="shrink-0">{actionsTrailing}</div>
      </div>
    )
  }

  return (
    <div
      className={cn(
        "flex flex-col gap-2 pt-0.5",
        !primaryFullWidth && "sm:flex-row sm:flex-wrap sm:items-center",
      )}
      data-slot="marketing-banner-actions"
    >
      {primaryAction ? (
        <MarketingBannerAction
          action={primaryAction}
          priority="primary"
          fullWidth={primaryFullWidth}
          onBrandSurface={onBrandSurface}
        />
      ) : null}
      {secondaryAction ? (
        <MarketingBannerAction
          action={secondaryAction}
          priority="secondary"
          onBrandSurface={onBrandSurface}
        />
      ) : null}
    </div>
  )
}

export function MarketingBanner({
  layout,
  floatingVariant = "card",
  tone: toneProp,
  title,
  titleAs: TitleTag = "h3",
  eyebrow,
  eyebrowIcon,
  children,
  illustration,
  media,
  mediaFit = "contain",
  compactDescription = false,
  compact = false,
  primaryAction,
  secondaryAction,
  actionsTrailing,
  primaryActionFullWidth = false,
  dismissible = true,
  onDismiss,
  corner = "bottom-right",
  decorativeOverlay,
  className,
  ...props
}: MarketingBannerProps) {
  const [dismissed, setDismissed] = React.useState(false)

  function handleDismiss() {
    setDismissed(true)
    onDismiss?.()
  }

  if (dismissed) return null

  const isFloatingMedia = layout === "floating" && floatingVariant === "media"
  const tone = layout === "floating" ? "gradient" : (toneProp ?? "tint")

  if (layout === "floating") {
    return (
      <div
        role="complementary"
        aria-label={title}
        data-slot="marketing-banner"
        data-layout={layout}
        data-floating-variant={floatingVariant}
        data-tone={tone}
        data-corner={corner}
        className={cn(
          marketingBannerRootVariants({ layout, tone }),
          marketingBannerCornerClass[corner],
          isFloatingMedia ? "gap-0 p-0" : "gap-3 p-4",
          className,
        )}
        {...props}
      >
        {isFloatingMedia && media ? (
          <div
            data-slot="marketing-banner-media"
            className="relative aspect-[4/3] w-full shrink-0 overflow-hidden"
          >
            <div className="relative size-full">{media}</div>
            {dismissible ? (
              <MarketingBannerDismiss
                title={title}
                onClick={handleDismiss}
                side="left"
                highContrast
                className="absolute end-2 top-2 z-10"
              />
            ) : null}
          </div>
        ) : illustration ? (
          <div
            data-slot="marketing-banner-illustration"
            className="relative z-[1] flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-brand-foreground/35 bg-brand-deep"
            aria-hidden
          >
            {illustration}
          </div>
        ) : null}

        <div
          className={cn(
            "relative z-[1] flex min-w-0 flex-col gap-2",
            isFloatingMedia ? "p-4" : "pe-8",
          )}
        >
          <p
            data-slot="marketing-banner-title"
            className={cn(marketingTitleClassName, "text-base leading-snug")}
          >
            {title}
          </p>
          {children ? (
            <p
              data-slot="marketing-banner-description"
              className="text-sm leading-relaxed text-brand-foreground"
            >
              {children}
            </p>
          ) : null}
          <MarketingBannerActions
            primaryAction={primaryAction}
            secondaryAction={secondaryAction}
            actionsTrailing={actionsTrailing}
            primaryFullWidth={primaryActionFullWidth}
            onBrandSurface
          />
        </div>

        {!isFloatingMedia && dismissible ? (
          <MarketingBannerDismiss
            title={title}
            onClick={handleDismiss}
            side="left"
            highContrast
            className="absolute end-2 top-2"
          />
        ) : null}
      </div>
    )
  }

  const heroVisual = media ?? illustration
  // `cover` paints `media` behind the whole card instead of beside the copy
  // in its own grid column — there is no second column to reserve.
  const isCoverMedia = mediaFit === "cover" && Boolean(media)
  const showVisualColumn = Boolean(heroVisual) && !isCoverMedia
  const capCopyWidth = isCoverMedia || Boolean(decorativeOverlay)
  // Cover scrim caps title copy, but carousel chevrons need the full banner
  // width for [Try it] [Register] … [< | >] on one row.
  const splitActionsFromCopyCap = capCopyWidth && Boolean(actionsTrailing)
  // A hero on the brand ramp has to borrow the floating layout's ink. The
  // neutral defaults below (`text-foreground` headings, `text-muted-foreground`
  // copy, a near-black primary button) are drawn for `surface` and `tint`, which
  // sit on the page canvas; on the gradient they land dark-on-mid-pink and fail
  // AA outright.
  const onBrandSurface = tone === "gradient"

  const heroCopy = (
    <>
      {eyebrow ? (
        <MarketingBannerEyebrow
          eyebrow={eyebrow}
          eyebrowIcon={eyebrowIcon}
          onBrandSurface={onBrandSurface}
        />
      ) : null}
      <TitleTag
        className={cn(
          marketingTitleClassName,
          compact
            ? "text-xl leading-snug lg:text-2xl"
            : "text-2xl leading-tight lg:text-3xl",
          onBrandSurface && "text-brand-foreground",
        )}
      >
        {title}
      </TitleTag>
      {children ? (
        <p
          className={cn(
            "max-w-none text-sm leading-relaxed lg:max-w-lg lg:text-[0.9375rem]",
            onBrandSurface ? "text-brand-foreground" : "text-muted-foreground",
            compactDescription && "line-clamp-2",
          )}
        >
          {children}
        </p>
      ) : null}
    </>
  )

  return (
    <div
      role="complementary"
      aria-label={title}
      data-slot="marketing-banner"
      data-layout={layout}
      data-tone={tone}
      className={cn(
        marketingBannerRootVariants({ layout, tone }),
        // Two columns when *this* banner is wide enough, not when the viewport
        // is. `md:` used to split a 280px rail the same way as a full-width
        // promo, so "Exam Management" got 150px and ran out of the card.
        // Campus More from Exxat is `minmax(22rem, 1fr)`, so the featured
        // illustration has to appear by 20rem or the rail never shows it.
        // Art takes 30% with a 6.5rem floor, so the title still has ~15rem.
        // Middle-align copy with the visual (and centre a cover card's copy
        // when the carousel equalises heights). `fill` still stretches so the
        // media frame has a real height to bleed into.
        mediaFit === "fill"
          ? "@min-[20rem]/banner:items-stretch"
          : "items-center",
        // `@max` / `@min` do not overlap, so `grid-cols-1` cannot beat the
        // two-column query in stylesheet source order (which stacked Featured
        // art under the title in a 22rem rail).
        showVisualColumn
          ? compact
            ? "@max-[19.99rem]/banner:grid-cols-1 @min-[20rem]/banner:grid-cols-[minmax(0,1fr)_minmax(7rem,28%)] @min-[20rem]/banner:gap-4"
            : "@max-[19.99rem]/banner:grid-cols-1 @min-[20rem]/banner:grid-cols-[minmax(0,1fr)_minmax(6.5rem,30%)] @min-[20rem]/banner:gap-4"
          : "grid-cols-1",
        // Override the hero `p-5 lg:p-7` / `gap-5 lg:gap-8` from the CVA —
        // later utilities do not always win on conflict, so force the digest
        // density here.
        compact && "gap-3! p-4! lg:gap-4! lg:p-5!",
        className,
      )}
      {...props}
    >
      {isCoverMedia ? (
        <div className="absolute inset-0 z-0 overflow-hidden rounded-xl" aria-hidden>
          {media}
          {/* Scrim, not a hard crop line — the copy needs an opaque enough
              patch to clear 4.5:1 against `text-muted-foreground`, and a
              gradient gets there without a visible seam between "photo" and
              "panel". `from-card` (not a fixed color) so it matches
              whichever `tone` the banner is rendered with. */}
          <div className="absolute inset-0 bg-gradient-to-r from-card from-40% via-card/75 via-60% to-transparent" />
        </div>
      ) : null}

      {decorativeOverlay ? (
        <div
          data-slot="marketing-banner-decorative-overlay"
          className="pointer-events-none absolute inset-0 z-[1] overflow-hidden rounded-xl"
          aria-hidden
        >
          {decorativeOverlay}
        </div>
      ) : null}

      <div
        className={cn(
          "relative z-[1] order-1 flex min-w-0 flex-col gap-3 text-start @min-[20rem]/banner:order-none",
          !splitActionsFromCopyCap && capCopyWidth && "max-w-[55%]",
        )}
      >
        {splitActionsFromCopyCap ? (
          <div className="flex max-w-[55%] flex-col gap-3">{heroCopy}</div>
        ) : (
          heroCopy
        )}
        <MarketingBannerActions
          primaryAction={primaryAction}
          secondaryAction={secondaryAction}
          actionsTrailing={actionsTrailing}
          onBrandSurface={onBrandSurface}
        />
      </div>

      {showVisualColumn ? (
        <div
          className={cn(
            "relative z-[1] order-2 w-full items-center overflow-visible",
            compact
              ? "@min-[20rem]/banner:order-none @min-[20rem]/banner:min-h-0 @min-[20rem]/banner:justify-end"
              : "@min-[20rem]/banner:order-none @min-[20rem]/banner:min-h-[8rem] @min-[20rem]/banner:justify-end",
            // Media shares the row's vertical centre with the copy. `fill`
            // stretches the whole column so the frame below has a real
            // height to fill.
            media
              ? (mediaFit === "fill"
                  ? "@min-[20rem]/banner:items-stretch"
                  : "@min-[20rem]/banner:items-center")
              : "@min-[20rem]/banner:items-center",
            // Hide only on a phone-width stack. Compact Whats New cards are
            // 30rem, so a 32rem gate dropped the Leo mark and screenshots.
            "hidden @min-[20rem]/banner:flex",
            media &&
              (mediaFit === "fill"
                ? compact
                  ? "@min-[20rem]/banner:-me-4 @min-[20rem]/banner:-my-4"
                  : "@min-[20rem]/banner:-me-5 @min-[20rem]/banner:-my-5 @min-[36rem]/banner:-me-7 @min-[36rem]/banner:-my-7"
                : "@min-[20rem]/banner:-me-1 @min-[20rem]/banner:-my-2"),
          )}
          aria-hidden={!media}
        >
          <div
            className={cn(
              "relative flex w-full items-center justify-center",
              mediaFit === "fill" &&
                // The mask fades the image's own start edge to transparent
                // over its first ~18%, so it dissolves into the card's tone
                // instead of meeting the copy at a hard vertical line.
                cn(
                  "h-full overflow-hidden rounded-e-xl",
                  "[mask-image:linear-gradient(to_right,transparent,black_18%)]",
                  "[-webkit-mask-image:linear-gradient(to_right,transparent,black_18%)]",
                ),
              !media && "size-24 rounded-xl border border-brand/15 bg-brand/8 lg:size-28",
            )}
          >
            {heroVisual}
          </div>
        </div>
      ) : null}

      {dismissible ? (
        <MarketingBannerDismiss
          title={title}
          onClick={handleDismiss}
          highContrast={onBrandSurface}
          className="absolute end-2 top-2 lg:end-3 lg:top-3"
        />
      ) : null}
    </div>
  )
}