Header drawers

"use client"

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

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

/* Header-themed drawer family: 5 drawers opening from the bottom, all carrying the
   same slide-up mechanic from the bottom edge; the difference is ONLY in the layout
   of the HEADER/FOOTER/HANDLE band. The panel is always clear/opaque (bg-card).
   Self-contained - no radix, no vaul, no portal. A fixed inset-0 backdrop + a fixed
   panel pinned to the bottom edge (z-50). Internal state (defaultOpen) or
   controlled (open + onOpenChange). A backdrop click / Escape / the close button
   closes it. The panel takes focus on open. The slide runs through
   AnimatePresence; under reduced-motion there is no slide, only a fade. Color comes
   ONLY from tokens, with transparency via color-mix. */

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

type Edge = "right" | "left" | "top" | "bottom"

/* Panel height = size. Being a bottom drawer, height scales rather than width. */
const heightSize: Record<StyledSize, string> = {
  sm: "h-[35vh]",
  md: "h-[50vh]",
  lg: "h-[68vh]",
  xl: "h-[82vh]",
}

const edgeAnchor: Record<Edge, string> = {
  right: "inset-y-0 right-0",
  left: "inset-y-0 left-0",
  top: "inset-x-0 top-0",
  bottom: "inset-x-0 bottom-0",
}

/* The slideOffset mechanism from essentials is preserved: the panel slides in from
   100 percent outside its own edge. */
function slideOffset(edge: Edge) {
  switch (edge) {
    case "right":
      return { x: "100%" }
    case "left":
      return { x: "-100%" }
    case "top":
      return { y: "-100%" }
    case "bottom":
      return { y: "100%" }
  }
}

interface DrawerProps {
  size?: StyledSize
  trigger?: React.ReactNode
  title?: React.ReactNode
  children?: React.ReactNode
  className?: string
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (o: boolean) => void
}

function useControllableOpen(
  open: boolean | undefined,
  defaultOpen: boolean | undefined,
  onOpenChange: ((o: boolean) => void) | undefined
) {
  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false)
  const isControlled = open !== undefined
  const value = isControlled ? open : uncontrolled
  const setValue = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setUncontrolled(next)
      onOpenChange?.(next)
    },
    [isControlled, onOpenChange]
  )
  return [value, setValue] as const
}

/* Enough dummy text to scroll. Even when the content is short the panel is
   always scrollable. */
const filler = [
  "Drawers rise from the bottom edge and hold secondary tasks without leaving the current page.",
  "Everything inside scrolls on its own, so a long form or a dense list never pushes the banded header or footer out of reach.",
  "Use the banded layout to separate a persistent title from the body, and keep the primary actions anchored where the eye expects them.",
  "Group related fields, review a summary, or read through a policy without losing the surrounding context.",
  "Press Escape or click outside the panel at any time to dismiss it and return to the page underneath.",
  "The panel stays opaque on the ai2 card surface, so text keeps its contrast in both the light and dark themes.",
  "A grab handle at the top hints that the panel came up from below and can be sent back down again.",
]

/* Sample sections for the divider-separated body (DividerDrawer). */
const dividerSections = [
  {
    heading: "Overview",
    body: "A short summary sits at the top so the reader knows what the panel is for before scrolling.",
  },
  {
    heading: "Details",
    body: "Each block is separated by a token divider, which keeps long content readable without extra chrome.",
  },
  {
    heading: "Notes",
    body: "Dividers span the full width of the panel, so the sections line up with the banded header above.",
  },
  {
    heading: "Next steps",
    body: "Close the panel when you are done, or keep scrolling to review everything one more time.",
  },
]

const triggerBtn =
  "inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none whitespace-nowrap transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_i]:text-base [&_i]:leading-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"

/* The close button: pinned to the top right of the panel. A focus ring + icon
   alignment (svg + i). */
const closeBtn =
  "absolute right-4 top-4 z-20 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_i]:text-base [&_i]:leading-none [&_svg]:size-4 [&_svg]:shrink-0"

/* Footer aksiyon butonlari. */
const footerGhostBtn =
  "inline-flex h-9 select-none items-center justify-center rounded-lg border border-border bg-transparent px-4 text-sm font-medium text-foreground outline-none whitespace-nowrap transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50"

const footerPrimaryBtn =
  "inline-flex h-9 select-none items-center justify-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground outline-none whitespace-nowrap transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--color-primary)_88%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50"

const solidBackdrop = "bg-[color-mix(in_oklab,var(--color-foreground)_50%,transparent)]"

/* The top handle bar: a token grab handle pointing at the panel coming from below. */
const grabHandle =
  "mx-auto mt-3 h-1.5 w-12 shrink-0 rounded-full bg-[color-mix(in_oklab,var(--color-foreground)_25%,transparent)]"

/* Varsayilan govde: children + dolgu paragraflari. */
function defaultBody(children: React.ReactNode) {
  return (
    <div className="space-y-4 px-6 py-5 text-sm text-muted-foreground">
      {children ? <div className="text-foreground">{children}</div> : null}
      {filler.map((line, i) => (
        <p key={i}>{line}</p>
      ))}
    </div>
  )
}

interface ShellProps {
  props: DrawerProps
  /** Baslik bandini varyanta gore cizer. */
  renderHeader: (title: React.ReactNode) => React.ReactNode
  /** When true the header stays sticky top-0 inside the scroll container. */
  stickyHeader?: boolean
  /** A fixed action footer at the bottom. */
  renderFooter?: () => React.ReactNode
  /** Govde icerigi (varsayilan defaultBody). */
  renderBody?: (children: React.ReactNode) => React.ReactNode
  /** Baslik bandinin ustunde gorunur grab handle cubugu. */
  showHandle?: boolean
}

function DrawerShell({
  props,
  renderHeader,
  stickyHeader,
  renderFooter,
  renderBody = defaultBody,
  showHandle,
}: ShellProps) {
  const { size = "md", trigger, title, children, className } = props
  const reduce = useReducedMotion()
  const [isOpen, setOpen] = useControllableOpen(
    props.open,
    props.defaultOpen,
    props.onOpenChange
  )
  const panelRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false)
    }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [isOpen, setOpen])

  /* This family uses only the bottom edge; the slideOffset mechanism is preserved. */
  const edge: Edge = "bottom"
  const sizeClass = cn("w-full", heightSize[size])
  const enter = slideOffset(edge)

  const handleNode = showHandle ? (
    <span data-slot="styled-drawer-handle" className={grabHandle} aria-hidden />
  ) : null
  const headerNode = title ? renderHeader(title) : null
  const bodyInner = renderBody(children)
  const footerNode = renderFooter?.()

  return (
    <div data-slot="styled-drawer" className="inline-flex">
      {/* The ARIA state lives on the REAL trigger. There used to be a
          span role="button" tabIndex={-1} wrapper, which produced TWO buttons
          in the AX tree: one carrying the state (not focusable) and one that
          took focus (stateless). A screen-reader user never heard "has dialog"
          or "expanded" - measured with the CDP AX tree. */}
      {React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(trigger) ? (
        React.cloneElement(trigger, {
          "aria-haspopup": "dialog",
          "aria-expanded": isOpen,
          onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
            trigger.props.onClick?.(event)
            setOpen(true)
          },
        })
      ) : (
        <button
          type="button"
          aria-haspopup="dialog"
          aria-expanded={isOpen}
          onClick={() => setOpen(true)}
          className={triggerBtn}
        >
          {trigger ?? "Open"}
        </button>
      )}

      <AnimatePresence>
        {isOpen ? (
          <div className="fixed inset-0 z-50">
            <motion.div
              data-slot="styled-drawer-backdrop"
              onClick={() => setOpen(false)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: reduce ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
              className={cn("absolute inset-0", solidBackdrop)}
            />
            <motion.div
              ref={panelRef}
              data-slot="styled-drawer-panel"
              role="dialog"
              aria-modal="true"
              tabIndex={-1}
              onAnimationComplete={() => panelRef.current?.focus()}
              initial={reduce ? { opacity: 0 } : enter}
              animate={reduce ? { opacity: 1 } : { x: 0, y: 0 }}
              exit={reduce ? { opacity: 0 } : enter}
              transition={
                reduce
                  ? { duration: 0 }
                  : { type: "spring", stiffness: 320, damping: 34 }
              }
              className={cn(
                "fixed flex flex-col overflow-hidden rounded-t-2xl border-t border-border bg-card text-card-foreground shadow-lg outline-none",
                edgeAnchor[edge],
                sizeClass,
                className
              )}
            >
              <button
                type="button"
                onClick={() => setOpen(false)}
                aria-label="Close"
                className={closeBtn}
              >
                <X />
              </button>

              {stickyHeader ? (
                <>
                  {handleNode}
                  <div className="min-h-0 flex-1 overflow-y-auto">
                    {headerNode}
                    {bodyInner}
                  </div>
                </>
              ) : (
                <>
                  {handleNode}
                  {headerNode}
                  <div className="min-h-0 flex-1 overflow-y-auto">{bodyInner}</div>
                  {footerNode}
                </>
              )}
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* Title: ustte sade baslik bandi + border-b, govde altta kayar. */
export function TitleDrawer(props: DrawerProps) {
  return (
    <DrawerShell
      props={props}
      renderHeader={(title) => (
        <div
          data-slot="styled-drawer-header"
          className="border-b border-border px-6 py-4 pr-12 text-base font-semibold text-foreground"
        >
          {title}
        </div>
      )}
    />
  )
}

/* Sticky: long scrollable content, the header stays sticky top-0 and flush
   with the token (card) background. */
export function StickyDrawer(props: DrawerProps) {
  return (
    <DrawerShell
      props={props}
      stickyHeader
      renderHeader={(title) => (
        <div
          data-slot="styled-drawer-header"
          className="sticky top-0 z-10 border-b border-border bg-card px-6 py-4 pr-12 text-base font-semibold text-foreground"
        >
          {title}
        </div>
      )}
    />
  )
}

/* Footer: a fixed action footer at the bottom plus border-t; the body scrolls
   in the middle. */
export function FooterDrawer(props: DrawerProps) {
  return (
    <DrawerShell
      props={props}
      renderHeader={(title) => (
        <div
          data-slot="styled-drawer-header"
          className="border-b border-border px-6 py-4 pr-12 text-base font-semibold text-foreground"
        >
          {title}
        </div>
      )}
      renderFooter={() => (
        <div
          data-slot="styled-drawer-footer"
          className="flex items-center justify-end gap-2 border-t border-border px-6 py-4"
        >
          <button type="button" className={footerGhostBtn}>
            Cancel
          </button>
          <button type="button" className={footerPrimaryBtn}>
            Save changes
          </button>
        </div>
      )}
    />
  )
}

/* Handle: ustte gorunur grab handle cubugu + baslik bandi. */
export function HandleDrawer(props: DrawerProps) {
  return (
    <DrawerShell
      props={props}
      showHandle
      renderHeader={(title) => (
        <div
          data-slot="styled-drawer-header"
          className="border-b border-border px-6 pb-4 pt-3 pr-12 text-base font-semibold text-foreground"
        >
          {title}
        </div>
      )}
    />
  )
}

/* Divider: baslik bandi + govdede bolum ayraclari (border-t). */
export function DividerDrawer(props: DrawerProps) {
  return (
    <DrawerShell
      props={props}
      renderHeader={(title) => (
        <div
          data-slot="styled-drawer-header"
          className="border-b border-border px-6 py-4 pr-12 text-base font-semibold text-foreground"
        >
          {title}
        </div>
      )}
      renderBody={(children) => (
        <div className="text-sm text-muted-foreground">
          {children ? (
            <section className="px-6 py-5 text-foreground">{children}</section>
          ) : null}
          {dividerSections.map((section, i) => (
            <section
              key={section.heading}
              className={cn(
                "px-6 py-5",
                (children || i > 0) && "border-t border-border"
              )}
            >
              <h3 className="mb-1 text-sm font-semibold text-foreground">
                {section.heading}
              </h3>
              <p>{section.body}</p>
            </section>
          ))}
        </div>
      )}
    />
  )
}