Glass empty states

"use client"

import type * as React from "react"
import { Box, Gem, Inbox, Layers, Sparkles } from "lucide-react"

import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"

/* Glass empty family: 5 frosted / translucent empty-state panels. The glass
   surface derives from the glassDepth scale inside @ai2/glass (no hand-written
   backdrop-blur), so they all carry the ai2 inset highlight signature; the
   difference is the depth step, the tint and a light detail specific to the
   variant. Color comes ONLY from semantic tokens, with transparency via
   color-mix. size = padding + icon/text scale. Renders with no props too. Static -
   no motion. Note: the panel only makes sense sitting on top of a background.

   Depth map (a large panel sitting in the page flow):
     Crystal -> sm  (4px)  clear glass + a thin light line on top
     Frost   -> md  (8px)  the canonical default
     Tint    -> md  (8px)  the same glass as Frost, differing in its info hue
     Smoke   -> lg  (16px) dense smoke
     Depth   -> xl  (24px) a floating layered panel

   The tint surfaces are written as bg-[color-mix(...)], NOT [background:...]:
   only bg-* is in the same tailwind-merge group as the scale's bg-background/N
   and replaces it cleanly; since [background:...] is a separate group both would
   survive and the winner would be decided by stylesheet order rather than class
   order. */

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

type Scale = {
  root: string
  icon: string
  badge: string
  title: string
  description: string
}

const scales: Record<StyledSize, Scale> = {
  sm: {
    root: "gap-2 p-6",
    icon: "size-6",
    badge: "size-12",
    title: "text-sm",
    description: "text-xs",
  },
  md: {
    root: "gap-3 p-8",
    icon: "size-8",
    badge: "size-16",
    title: "text-base",
    description: "text-sm",
  },
  lg: {
    root: "gap-3.5 p-10",
    icon: "size-10",
    badge: "size-20",
    title: "text-lg",
    description: "text-sm",
  },
  xl: {
    root: "gap-4 p-12",
    icon: "size-12",
    badge: "size-24",
    title: "text-xl",
    description: "text-base",
  },
}

interface EmptyProps {
  className?: string
  size?: StyledSize
  icon?: React.ReactNode
  title?: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactNode
}

const rootBase =
  "relative flex flex-col items-center justify-center overflow-hidden rounded-2xl border text-center"

const iconBase = "[&_i]:leading-none [&_svg]:size-full"

/* Shared glass shell: the panel class carries the variant's technique. */
function GlassShell({
  panelClassName,
  badgeClassName,
  fallbackIcon,
  className,
  size = "md",
  icon,
  title,
  description,
  action,
  children,
}: EmptyProps & {
  panelClassName: string
  badgeClassName: string
  fallbackIcon: React.ReactNode
  children?: React.ReactNode
}) {
  const s = scales[size]
  return (
    <div
      data-slot="styled-empty"
      className={cn(rootBase, panelClassName, s.root, className)}
    >
      {children}
      <span
        aria-hidden="true"
        className={cn(
          "relative flex items-center justify-center rounded-full border",
          badgeClassName,
          s.badge
        )}
      >
        <span className={cn(iconBase, s.icon)}>{icon ?? fallbackIcon}</span>
      </span>
      <p className={cn("relative font-semibold text-foreground", s.title)}>
        {title}
      </p>
      {description ? (
        <p
          className={cn(
            "relative max-w-prose text-muted-foreground",
            s.description
          )}
        >
          {description}
        </p>
      ) : null}
      {action ? <div className="relative mt-2">{action}</div> : null}
    </div>
  )
}

const neutralBadge =
  "text-muted-foreground [background:color-mix(in_oklab,var(--color-foreground)_8%,transparent)] [border-color:color-mix(in_oklab,var(--color-border)_70%,transparent)]"

/* FrostEmpty: the canonical default glass (md/8px). The ground is now the scale's own bg-background/60 - the variant only softens the border. */
export function FrostEmpty({
  title = "Nothing here yet",
  description = "This frosted panel is waiting for its first item.",
  ...props
}: EmptyProps) {
  return (
    <GlassShell
      panelClassName={cn(
        glassDepth.md,
        "[border-color:color-mix(in_oklab,var(--color-border)_60%,transparent)]"
      )}
      badgeClassName={neutralBadge}
      fallbackIcon={<Inbox />}
      title={title}
      description={description}
      {...props}
    />
  )
}

/* TintEmpty: the SAME md step as Frost; what distinguishes it is the info hue, not the blur. (Because primary/brand carries ~0.005 chroma, a "primary tint" would be invisible.) The icon colour was also moved from text-primary to text-info: inside an info-toned badge, primary read as neutral, so the tint was inconsistent. */
export function TintEmpty({
  title = "Your collection is empty",
  description = "Add something and it will appear on this tinted panel.",
  ...props
}: EmptyProps) {
  return (
    <GlassShell
      panelClassName={cn(
        glassDepth.md,
        "bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]",
        "[border-color:color-mix(in_oklab,var(--color-info)_25%,transparent)]"
      )}
      badgeClassName="text-info [background:color-mix(in_oklab,var(--color-info)_16%,transparent)] [border-color:color-mix(in_oklab,var(--color-info)_30%,transparent)]"
      fallbackIcon={<Sparkles />}
      title={title}
      description={description}
      {...props}
    />
  )
}

/* SmokeEmpty: lg (16px). It used to be xl; a large panel sits on a flat page ground, and with nothing to diffuse the 24px cost a compositor layer without adding anything visually. */
export function SmokeEmpty({
  title = "No activity to show",
  description = "Events will surface through the smoke as they happen.",
  ...props
}: EmptyProps) {
  return (
    <GlassShell
      panelClassName={cn(
        glassDepth.lg,
        "bg-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)]",
        "[border-color:color-mix(in_oklab,var(--color-foreground)_18%,transparent)]"
      )}
      badgeClassName={neutralBadge}
      fallbackIcon={<Layers />}
      title={title}
      description={description}
      {...props}
    />
  )
}

/* CrystalEmpty: sm (4px) - this file was already on the right step with blur-sm, and now the same value comes from the scale together with the signature. Its character is the thin light line on top. */
export function CrystalEmpty({
  title = "A clean slate",
  description = "Nothing is stored here yet. Whatever you add shows up first.",
  ...props
}: EmptyProps) {
  return (
    <GlassShell
      panelClassName={cn(
        glassDepth.sm,
        "[border-color:color-mix(in_oklab,var(--color-border)_50%,transparent)]"
      )}
      badgeClassName={neutralBadge}
      fallbackIcon={<Gem />}
      title={title}
      description={description}
      {...props}
    >
      <span
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-6 top-0 h-px [background:linear-gradient(to_right,transparent,color-mix(in_oklab,var(--color-foreground)_30%,transparent),transparent)]"
      />
    </GlassShell>
  )
}

/* DepthEmpty: xl (24px) - the only variant in the family meant to read as a
   genuinely floating panel; this is the one place that earns the depth.
   The old shadow-lg + [box-shadow:inset...] pair was REMOVED. They were in the
   same tailwind-merge group, so shadow-lg was already dropping silently; worse,
   the remaining [box-shadow:...] would now take the place of the glassDepth
   signature. The depth is now told through the scale's ambient drop plus a radial
   light coming from below. */
export function DepthEmpty({
  title = "No items in this space",
  description = "This layered panel fills up as soon as you create something.",
  ...props
}: EmptyProps) {
  return (
    <GlassShell
      panelClassName={cn(
        glassDepth.xl,
        "[border-color:color-mix(in_oklab,var(--color-border)_60%,transparent)]"
      )}
      badgeClassName={neutralBadge}
      fallbackIcon={<Box />}
      title={title}
      description={description}
      {...props}
    >
      <span
        aria-hidden="true"
        /* The light derives from foreground: in this theme --color-primary resolves to BYTE-IDENTICAL the same value as --color-foreground, so a "primary glow" was both an invisible claim and a wrong signal. Primary is a role token (active/selected/focus), not a decorative colour. */
        className="pointer-events-none absolute inset-0 [background:radial-gradient(120%_80%_at_50%_120%,color-mix(in_oklab,var(--color-foreground)_14%,transparent),transparent_70%)]"
      />
    </GlassShell>
  )
}