Glass accordion

"use client"

import * as React from "react"
import { ChevronDown } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

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

/* Glass accordion family: 5 frosted-glass accordions. The glass surface is NO
   LONGER hand-written: every variant derives from the glassDepth scale in
   @ai2/glass, so it carries the ai2 inset-highlight signature. The variants
   differ by depth step and tint.
   Every export is a complete accordion: internal single-open state, a button
   header with aria-expanded, framer height auto animation. Colour comes ONLY
   from tokens. Alpha via color-mix. Under reduced-motion opening and closing
   are instant. Size = padding + text scale. Renders without props too.

   Depth map (large panels inside the page flow: medium weight):
     Crystal -> sm  (4px)  clear glass; the name already says "clear", so little
                           blur is the honest choice
     Frost   -> md  (8px)  the canonical default frost
     Tint    -> md  (8px)  the SAME glass as Frost; the difference is the info
                           hue, not the blur
     Smoke   -> lg  (16px) dense smoke; the content underneath becomes texture
     Depth   -> xl  (24px) the only genuinely "floating" variant; this one earns
                           the xl

   Glass does NOT stack: the outer container is not glass, the items are sibling
   panels.
   tailwind-merge trap: glassDepth carries a [box-shadow:...], which is why no
   variant adds shadow-* / ring-* - doing so would silently drop the signature.
   Extra definition is given through the border only. */

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

export interface StyledAccordionItem {
  value: string
  title: React.ReactNode
  content: React.ReactNode
}

interface StyledAccordionProps {
  className?: string
  size?: StyledSize
  items?: StyledAccordionItem[]
  defaultOpen?: string
}

const headerPad: Record<StyledSize, string> = {
  sm: "px-3 py-2.5 text-sm",
  md: "px-4 py-3 text-sm",
  lg: "px-5 py-4 text-base",
  xl: "px-6 py-5 text-lg",
}

const bodyPad: Record<StyledSize, string> = {
  sm: "px-3 pb-2.5 text-sm",
  md: "px-4 pb-3 text-sm",
  lg: "px-5 pb-4 text-base",
  xl: "px-6 pb-5 text-base",
}

const iconSize: Record<StyledSize, string> = {
  sm: "size-4",
  md: "size-4",
  lg: "size-5",
  xl: "size-5",
}

const defaultItems: StyledAccordionItem[] = [
  {
    value: "item-1",
    title: "What is included?",
    content:
      "Every plan ships the full component library, semantic tokens, and lifetime updates for the tier you own.",
  },
  {
    value: "item-2",
    title: "How does installation work?",
    content:
      "Add any component with a single CLI command. Files land in your project and stay fully editable.",
  },
  {
    value: "item-3",
    title: "Can I use it in production?",
    content:
      "Yes. The system is framework agnostic, self contained, and safe to ship to any number of projects.",
  },
]

function useSingleOpen(defaultOpen?: string) {
  const [open, setOpen] = React.useState<string | null>(defaultOpen ?? null)
  const toggle = React.useCallback(
    (value: string) => setOpen((cur) => (cur === value ? null : value)),
    []
  )
  return { open, toggle }
}

const headerBase =
  "flex w-full items-center justify-between gap-3 text-left font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50"

function Panel({
  isOpen,
  size,
  children,
}: {
  isOpen: boolean
  size: StyledSize
  children: React.ReactNode
}) {
  const reduce = useReducedMotion()
  return (
    <AnimatePresence initial={false}>
      {isOpen && (
        <motion.div
          key="panel"
          initial={reduce ? false : { height: 0, opacity: 0 }}
          animate={{ height: "auto", opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          transition={
            reduce ? { duration: 0 } : { duration: 0.25, ease: [0.4, 0, 0.2, 1] }
          }
          className="overflow-hidden"
        >
          <div className={cn(bodyPad[size], "text-muted-foreground")}>
            {children}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

function Chevron({ isOpen, size }: { isOpen: boolean; size: StyledSize }) {
  const reduce = useReducedMotion()
  return (
    <motion.span
      aria-hidden
      className="shrink-0 text-muted-foreground"
      animate={{ rotate: isOpen ? 180 : 0 }}
      transition={reduce ? { duration: 0 } : { duration: 0.2 }}
    >
      <ChevronDown className={iconSize[size]} />
    </motion.span>
  )
}

/* Shared frosted-glass shell: every item is a separate translucent panel with
   space between them. panelClass carries each variant's blur/tint technique. */
function GlassShell({
  props,
  panelClass,
}: {
  props: StyledAccordionProps
  panelClass: string
}) {
  const { className, size = "md", items = defaultItems, defaultOpen } = props
  const { open, toggle } = useSingleOpen(defaultOpen)
  return (
    <div
      data-slot="styled-accordion"
      className={cn("flex flex-col gap-2", className)}
    >
      {items.map((item) => {
        const isOpen = open === item.value
        return (
          <div
            key={item.value}
            className={cn("overflow-hidden rounded-xl border", panelClass)}
          >
            <button
              type="button"
              aria-expanded={isOpen}
              onClick={() => toggle(item.value)}
              className={cn(headerBase, headerPad[size])}
            >
              {item.title}
              <Chevron isOpen={isOpen} size={size} />
            </button>
            <Panel isOpen={isOpen} size={size}>
              {item.content}
            </Panel>
          </div>
        )
      })}
    </div>
  )
}

/* Frost: the canonical default glass (md/8px). The scale's own bg-background/60
   provides the surface; the variant only softens the border. */
export function FrostAccordion(props: StyledAccordionProps) {
  return (
    <GlassShell
      props={props}
      panelClass={cn(
        glassDepth.md,
        "border-[color-mix(in_oklab,var(--color-border)_60%,transparent)]"
      )}
    />
  )
}

/* Tint: the SAME md step as Frost - the difference is the info hue, not the
   blur. (primary/brand chroma carries ~0.005, so a "primary tint" would be
   invisible; the tint comes from info.) The tint bg-* replaces the scale's
   bg-background/60, and the supports-[] variant has to be overridden too,
   otherwise the neutral ground inside @supports suppresses the tint. */
export function TintAccordion(props: StyledAccordionProps) {
  return (
    <GlassShell
      props={props}
      panelClass={cn(
        glassDepth.md,
        "border-[color-mix(in_oklab,var(--color-info)_25%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-info)_12%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_12%,transparent)]"
      )}
    />
  )
}

/* Smoke: lg (16px) - turning the content underneath into texture is exactly
   what Smoke promises. */
export function SmokeAccordion(props: StyledAccordionProps) {
  return (
    <GlassShell
      props={props}
      panelClass={cn(
        glassDepth.lg,
        "border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)]",
        "bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]"
      )}
    />
  )
}

/* Crystal: sm (4px). It used to be blur-xl, which contradicted its own name -
   clear glass means little diffusion. The sm step's bg-background/50 is already
   more transparent than Frost, so no extra tint is needed; the thin border
   carries the character. */
export function CrystalAccordion(props: StyledAccordionProps) {
  return (
    <GlassShell
      props={props}
      panelClass={cn(
        glassDepth.sm,
        "border-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]"
      )}
    />
  )
}

/* Depth: xl (24px) - the one variant in the family meant to read as a genuinely
   floating panel. The old shadow-sm was REMOVED: cn() collapses the same
   box-shadow group down to the last one, so shadow-sm was silently erasing the
   glassDepth signature. The extra definition now comes from an opaque
   border-border. */
export function DepthAccordion(props: StyledAccordionProps) {
  return (
    <GlassShell
      props={props}
      panelClass={cn(
        glassDepth.xl,
        "border-border",
        "bg-[color-mix(in_oklab,var(--color-surface-2)_65%,transparent)]",
        "supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-surface-2)_65%,transparent)]"
      )}
    />
  )
}