/**
 * Card — surface component
 *
 * ── SPACING SYSTEM (do not override) ────────────────────────────────────────
 *   Card owns all vertical rhythm via `--card-spacing`:
 *     default → 16px (`--spacing(4)`)
 *     size="sm" → 12px (`--spacing(3)`)
 *
 *   Rules:
 *   ✗  Never add pb-X / pt-X to CardContent or CardHeader
 *   ✗  Never add h-full / flex / flex-col to the Card wrapper
 *   ✗  Never add flex-1 / min-h-0 to CardContent
 *   ✗  Never add shrink-0 / pb-2 to CardHeader
 *   ✓  For scrollable list content (Activity, Tasks): add overflow-auto only
 *   ✓  For equal-height grid pairs in MixView: handle at grid cell level
 *   ✓  Edge-to-edge scroll: `-mx-(--card-spacing)` + `px-(--card-spacing)` on the same node only
 *
 * ── CARD MEDIA ──────────────────────────────────────────────────────────────
 *   CardMedia — photo, video, animation, illustration, audio only.
 *   Charts and data viz belong in ChartCard — not CardMedia.
 *
 * ── GLOW TREATMENT ──────────────────────────────────────────────────────────
 *   Only two approved uses — see full spec in key-metrics.tsx GLOW GUIDELINE:
 *   1. AI surfaces   (Insights card, Ask Leo responses)  → opacity 0.12–0.16
 *   2. Hero sections (Key Metrics KPI band, onboarding)  → opacity 0.18–0.24
 *   Always pair with overflow-hidden on the Card.
 *   Never add glow to: Tasks, Activity, Learn, Charts, nav elements.
 *
 * ── FOOTER PATTERN ──────────────────────────────────────────────────────────
 *   Use CardFooter for card-level CTA actions (e.g. "View all tasks", "Ask Leo").
 *   CardFooter renders with border-t only (no fill wash).
 *   Do not put primary workflow actions in CardFooter — use CardHeader CardAction.
 *
 * ── INTERACTIVE ─────────────────────────────────────────────────────────────
 *   Pass interactive on Card for hover shadow + cursor when the card is navigational.
 *   Prefer wrapping in Link with interactive — do not nest buttons inside onClick Card.
 *   Passing onClick makes the shell role="button" + tabIndex={0}; Enter and Space
 *   activate it. Keys raised by nested controls are ignored.
 *
 * ── SIZE VARIANT ────────────────────────────────────────────────────────────
 *   size="sm"  → tighter spacing. Use inside compact grids.
 *   size="default" (implicit) → standard spacing described above.
 *
 * ── TYPOGRAPHY ──────────────────────────────────────────────────────────────
 *   CardTitle renders as h3 by default (section heading inside a page with one H1).
 *   CardDescription + CardContent body: text-sm minimum.
 *   Never use arbitrary sub-12px classes on visible card copy.
 */

import * as React from "react"
import { Slot } from "radix-ui"

import { cn } from "../../lib/utils"
import { ScrollRegion } from "./scroll-region"

function Card({
  className,
  size = "default",
  interactive = false,
  onClick,
  onKeyDown,
  ...props
}: React.ComponentProps<"div"> & {
  size?: "default" | "sm"
  /** Hover shadow + pointer cursor — pair with Link or a single focusable child. */
  interactive?: boolean
}) {
  // A clickable Card stays a <div> with button semantics: card bodies carry
  // headings and their own buttons, both of which are invalid inside <button>.
  const isClickable = Boolean(onClick)

  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event)
    if (!isClickable || event.defaultPrevented) return
    // Ignore keys raised by nested controls (favorite button, links, menus).
    if (event.target !== event.currentTarget) return
    if (event.key !== "Enter" && event.key !== " ") return
    event.preventDefault()
    event.currentTarget.click()
  }

  return (
    <div
      data-slot="card"
      data-size={size}
      data-interactive={interactive ? "" : undefined}
      role={isClickable ? "button" : undefined}
      tabIndex={isClickable ? 0 : undefined}
      onClick={onClick}
      onKeyDown={isClickable ? handleKeyDown : onKeyDown}
      className={cn(
        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-data-[slot=card-media]:pt-0 has-[>img:first-child]:pt-0 has-[>[data-slot=card-section]:last-child]:pb-0 data-[interactive]:cursor-pointer data-[interactive]:transition-shadow data-[interactive]:hover:shadow-md data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        isClickable &&
          "text-start outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"h3"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "h3"

  return (
    <Comp
      data-slot="card-title"
      className={cn(
        "font-sans text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className,
      )}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className,
      )}
      {...props}
    />
  )
}

type CardMediaAspect = "auto" | "video" | "square"

/**
 * Hero media above card copy — photo, video, animation, illustration, or audio.
 * Do not use for charts; compose ChartCard for data visualization tiles.
 */
function CardMedia({
  className,
  aspect = "auto",
  ...props
}: React.ComponentProps<"div"> & { aspect?: CardMediaAspect }) {
  return (
    <div
      data-slot="card-media"
      className={cn(
        "relative w-full overflow-hidden rounded-t-xl",
        aspect === "video" && "aspect-video",
        aspect === "square" && "aspect-square",
        "[&_img]:size-full [&_img]:object-cover",
        "[&_video]:size-full [&_video]:object-cover",
        "[&_audio]:w-full",
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-(--card-spacing)", className)}
      {...props}
    />
  )
}

/**
 * Keyboard-accessible scroll band inside a card — edge bleed or inset.
 * Pair with CardContent `-mb-(--card-spacing)` when the scroll area is the last body block.
 */
function CardScrollRegion({
  className,
  edgeToEdge = false,
  label,
  ...props
}: React.ComponentProps<typeof ScrollRegion> & {
  /** Bleed to card horizontal edges using `--card-spacing`. */
  edgeToEdge?: boolean
}) {
  return (
    <ScrollRegion
      data-slot="card-scroll-region"
      label={label}
      className={cn(
        edgeToEdge && "-mx-(--card-spacing) px-(--card-spacing)",
        className,
      )}
      {...props}
    />
  )
}

/** In-card band. Subdued keeps the card spacing before its top divider. */
function CardSection({
  className,
  subdued = false,
  ...props
}: React.ComponentProps<"div"> & { subdued?: boolean }) {
  return (
    <div
      data-slot="card-section"
      className={cn(
        subdued
          ? "border-t px-(--card-spacing) pt-(--card-spacing) pb-(--card-spacing)"
          : "px-(--card-spacing) py-(--card-spacing)",
        className,
      )}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn(
        "flex items-center rounded-b-xl border-t p-(--card-spacing)",
        className,
      )}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
  CardMedia,
  CardSection,
  CardScrollRegion,
}

export type { CardMediaAspect }