Tone hover cards

"use client"

import * as React from "react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"
import {
  AlertOctagon,
  AlertTriangle,
  CheckCircle,
  Info,
  Sparkles,
  type LucideIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"

/* HoverCard Tone family: 5 semantically toned hover cards. Self-contained (no
   radix, no portal) - a trigger + a softly toned card positioned below it, opened
   on hover/focus. The opening uses framer-motion (fade + a slight rise + scale) and
   is pinned by reduced-motion. Each card carries the -soft background of its own
   tone + the on-plan color + its icon. Color comes ONLY from semantic tokens; since
   primary has no -soft, its background is derived from the primary token with
   color-mix. Size = card width. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const cardWidth: Record<StyledSize, string> = {
  sm: "w-56",
  md: "w-64",
  lg: "w-72",
  xl: "w-80",
}

type Tone = "primary" | "success" | "warning" | "danger" | "info"

/* Tone map: per tone a soft ground plus an on-plan colour plus the trigger colour plus the icon plus the default body text. Success, warning, danger and info use the real -soft tokens; primary has no -soft, so its ground and border are derived from the primary token through color-mix. */
const tones: Record<
  Tone,
  {
    Icon: LucideIcon
    title: string
    surface: string
    trigger: string
    body: string
  }
> = {
  primary: {
    Icon: Sparkles,
    title: "Primary",
    surface:
      "text-primary [background-color:color-mix(in_oklab,var(--color-primary)_12%,transparent)] [border-color:color-mix(in_oklab,var(--color-primary)_28%,transparent)]",
    trigger: "text-primary",
    body: "The primary tone highlights the main action or the most important detail in a view.",
  },
  success: {
    Icon: CheckCircle,
    title: "Success",
    surface:
      "bg-success-soft text-success-soft-foreground [border-color:color-mix(in_oklab,var(--color-success)_28%,transparent)]",
    trigger: "text-success-soft-foreground",
    body: "The action completed successfully and everything is in a healthy state.",
  },
  warning: {
    Icon: AlertTriangle,
    title: "Warning",
    surface:
      "bg-warning-soft text-warning-soft-foreground [border-color:color-mix(in_oklab,var(--color-warning)_28%,transparent)]",
    trigger: "text-warning-soft-foreground",
    body: "Something needs your attention before you continue, though nothing has failed yet.",
  },
  danger: {
    Icon: AlertOctagon,
    title: "Danger",
    surface:
      "bg-danger-soft text-danger-soft-foreground [border-color:color-mix(in_oklab,var(--color-danger)_28%,transparent)]",
    trigger: "text-danger-soft-foreground",
    body: "A destructive or failing state that needs to be resolved before you move on.",
  },
  info: {
    Icon: Info,
    title: "Info",
    surface:
      "bg-info-soft text-info-soft-foreground [border-color:color-mix(in_oklab,var(--color-info)_28%,transparent)]",
    trigger: "text-info-soft-foreground",
    body: "A neutral, informational note that adds context without demanding an action.",
  },
}

/* Tetikleyici temeli: focus ring + ikon uyumu (lucide svg + remixicon i). */
const triggerBase =
  "inline-flex items-center gap-1.5 rounded-md font-medium underline-offset-4 outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

interface Props {
  size?: StyledSize
  trigger?: React.ReactNode
  children?: React.ReactNode
  className?: string
}

/* Shared shell: a toned card that opens on hover and focus. AnimatePresence watches a single motion child; to avoid a horizontal-centring transform clash, x:-50% is applied through motion (instead of Tailwind's -translate-x-1/2). */
function ToneHoverCard({
  tone,
  size = "md",
  trigger,
  children,
  className,
}: Props & { tone: Tone }) {
  const reduce = useReducedMotion()
  const [open, setOpen] = React.useState(false)
  const t = tones[tone]
  const Icon = t.Icon

  const show = () => setOpen(true)
  const hide = () => setOpen(false)

  const fallback = (
    <button type="button" className={cn(triggerBase, t.trigger)}>
      Hover me
    </button>
  )

  return (
    <span
      data-slot="styled-hover-card"
      data-tone={tone}
      className="relative inline-flex"
      onMouseEnter={show}
      onMouseLeave={hide}
      onFocus={show}
      onBlur={hide}
    >
      {trigger ?? fallback}
      <AnimatePresence>
        {open ? (
          <motion.span
            role="dialog"
            data-slot="styled-hover-card-content"
            initial={
              reduce
                ? { opacity: 0, x: "-50%" }
                : { opacity: 0, x: "-50%", y: 4, scale: 0.98 }
            }
            animate={
              reduce
                ? { opacity: 1, x: "-50%" }
                : { opacity: 1, x: "-50%", y: 0, scale: 1 }
            }
            exit={
              reduce
                ? { opacity: 0, x: "-50%" }
                : { opacity: 0, x: "-50%", y: 4, scale: 0.98 }
            }
            transition={
              reduce ? { duration: 0 } : { type: "spring", stiffness: 320, damping: 26 }
            }
            className={cn(
              "absolute left-1/2 top-full z-20 mt-2 block origin-top rounded-xl border p-4 text-left shadow-lg [&_i]:text-base [&_i]:leading-none [&_svg]:size-4 [&_svg]:shrink-0",
              cardWidth[size],
              t.surface,
              className
            )}
          >
            <span className="flex items-center gap-2 font-semibold">
              <Icon aria-hidden="true" />
              <span className="text-sm">{t.title}</span>
            </span>
            <span className="mt-2 block text-sm opacity-90">
              {children ?? t.body}
            </span>
          </motion.span>
        ) : null}
      </AnimatePresence>
    </span>
  )
}

/* Primary: primary token'indan turetilmis yumusak zemin + Sparkles ikonu. */
export function PrimaryHoverCard(props: Props) {
  return <ToneHoverCard tone="primary" {...props} />
}

/* Success: success-soft zemin + CheckCircle ikonu. */
export function SuccessHoverCard(props: Props) {
  return <ToneHoverCard tone="success" {...props} />
}

/* Warning: warning-soft zemin + AlertTriangle ikonu. */
export function WarningHoverCard(props: Props) {
  return <ToneHoverCard tone="warning" {...props} />
}

/* Danger: danger-soft zemin + AlertOctagon ikonu. */
export function DangerHoverCard(props: Props) {
  return <ToneHoverCard tone="danger" {...props} />
}

/* Info: info-soft zemin + Info ikonu. */
export function InfoHoverCard(props: Props) {
  return <ToneHoverCard tone="info" {...props} />
}