pocket-pascal/client/src/components/ui-pp/Accordion.tsx

import { useId, useState, type ReactNode } from "react"
import { ChevronRight } from "lucide-react"

import { cx } from "@/lib/cx"

export interface AccordionProps {
  title: ReactNode
  meta?: ReactNode
  icon?: ReactNode
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
  className?: string
  children: ReactNode
}

/**
 * Top-level elevated accordion (type groups, pantry categories).
 * Bevel/fill use rounded-[inherit] so radius tokens stay consistent.
 */
export function Accordion({
  title,
  meta,
  icon,
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  className,
  children,
}: AccordionProps) {
  const reactId = useId()
  const panelId = `acc-panel-${reactId}`
  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
  const isControlled = controlledOpen !== undefined
  const open = isControlled ? controlledOpen : uncontrolledOpen

  function toggle() {
    const next = !open
    if (!isControlled) setUncontrolledOpen(next)
    onOpenChange?.(next)
  }

  return (
    <div
      className={cx(
        "overflow-hidden rounded-[var(--radius-card)] shadow-[var(--shadow-elevated)]",
        className,
      )}
      style={{ backgroundImage: "var(--surface-gradient)" }}
    >
      <div className="relative">
        <div
          className="absolute inset-0 rounded-[inherit]"
          style={{
            background: "var(--glass-fill)",
            backdropFilter: "blur(var(--glass-blur))",
            WebkitBackdropFilter: "blur(var(--glass-blur))",
          }}
        />
        <div className="glass-border pointer-events-none absolute inset-0 rounded-[inherit]" />

        <button
          type="button"
          aria-expanded={open}
          aria-controls={panelId}
          onClick={toggle}
          className={cx(
            "relative z-10 flex min-h-[56px] w-full items-center gap-3 px-4 py-3 text-left",
            "font-body no-select [-webkit-tap-highlight-color:transparent]",
            "active:brightness-[0.98]",
          )}
        >
          {icon ? <span className="shrink-0 leading-none">{icon}</span> : null}
          <span className="type-title-sm min-w-0 flex-1 text-[var(--ink)]">
            {title}
          </span>
          {meta ? (
            <span className="type-caption shrink-0 font-bold text-[var(--ink-faint)]">
              {meta}
            </span>
          ) : null}
          <ChevronRight
            aria-hidden
            className={cx(
              "h-5 w-5 shrink-0 text-[var(--ink-faint)] transition-transform duration-150",
              open && "rotate-90",
            )}
          />
        </button>

        {open ? (
          <div
            id={panelId}
            className="relative z-10 border-t border-[var(--border)] px-3 py-3"
          >
            {children}
          </div>
        ) : null}
      </div>
    </div>
  )
}

export interface NestedDisclosureProps {
  title: ReactNode
  defaultOpen?: boolean
  className?: string
  children: ReactNode
}

/**
 * Compact nested row for lists inside an Accordion.
 * Radius --radius-nested with parent p-3 → outer card 24 = 12 + 12.
 */
export function NestedDisclosure({
  title,
  defaultOpen = false,
  className,
  children,
}: NestedDisclosureProps) {
  const reactId = useId()
  const panelId = `nested-panel-${reactId}`
  const [open, setOpen] = useState(defaultOpen)

  return (
    <div
      className={cx(
        "overflow-hidden rounded-[var(--radius-nested)]",
        "ring-1 ring-[var(--border)]",
        className,
      )}
      style={{ background: "var(--glass-fill)" }}
    >
      <button
        type="button"
        aria-expanded={open}
        aria-controls={panelId}
        onClick={() => setOpen((value) => !value)}
        className={cx(
          "flex min-h-[48px] w-full items-center gap-2 px-3 py-2 text-left",
          "font-body no-select [-webkit-tap-highlight-color:transparent]",
          "active:brightness-[0.98]",
        )}
      >
        <span className="type-body-emphasis min-w-0 flex-1 text-[var(--ink)]">
          {title}
        </span>
        <ChevronRight
          aria-hidden
          className={cx(
            "h-4 w-4 shrink-0 text-[var(--ink-faint)] transition-transform duration-150",
            open && "rotate-90",
          )}
        />
      </button>
      {open ? (
        <div
          id={panelId}
          className="border-t border-[var(--border)] px-3 py-3"
        >
          {children}
        </div>
      ) : null}
    </div>
  )
}