"use client";

import { type ComponentProps } from "react";
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";

import { Button } from "./button";
import { cn } from "./cn";

/*
 * A Sheet is a Dialog pinned to an edge, and it is built on the same primitive
 * for that reason — focus capture, focus return, Escape, outside click, and
 * inerting the background are the modal behaviours a drawer needs too, and none
 * of them are re-implemented here.
 *
 * Both products already ship exactly this anatomy under exactly these names, so
 * the shape is theirs rather than invented: ten parts, a `side` defaulting to
 * right, three-quarter width capped at `sm` on wider viewports, and a close
 * button in the top corner.
 */

function Sheet(props: SheetPrimitive.Root.Props) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}

function SheetTrigger(props: SheetPrimitive.Trigger.Props) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}

function SheetPortal(props: SheetPrimitive.Portal.Props) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}

function SheetClose(props: SheetPrimitive.Close.Props) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}

function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
  return (
    <SheetPrimitive.Backdrop
      data-slot="sheet-overlay"
      className={cn(
        "fixed inset-0 z-50 bg-(color:--color-backdrop)",
        "transition-opacity duration-(--motion-duration) ease-(--motion-ease)",
        "data-starting-style:opacity-0 data-ending-style:opacity-0",
        className,
      )}
      {...props}
    />
  );
}

function XIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" className="size-4" fill="none">
      <path
        d="M4 4l8 8M12 4l-8 8"
        stroke="currentColor"
        strokeWidth="1.75"
        strokeLinecap="round"
      />
    </svg>
  );
}

/*
 * Side styling is a lookup rather than `data-[side=…]:` variants, and that is
 * not a style preference. A variant-prefixed `data-[side=right]:w-3/4` and a
 * caller's plain `w-72` are different groups to tailwind-merge, so both survive
 * the merge — and the prefixed one wins on specificity, silently defeating the
 * override. Both products pass a width (`w-72`, `sm:max-w-md`, `w-[380px]`) and
 * all of them were being ignored until this became a lookup. The `data-side`
 * attribute stays for styling hooks and tests; it just does not carry layout.
 *
 * A full-width translate rather than a fixed nudge: the sheet leaves by the
 * edge it is pinned to, which is what makes it read as a drawer instead of a
 * dialog that fades.
 */
const sideClasses = {
  right:
    "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm " +
    "data-starting-style:translate-x-full data-ending-style:translate-x-full",
  left:
    "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm " +
    "data-starting-style:-translate-x-full data-ending-style:-translate-x-full",
  top:
    "inset-x-0 top-0 h-auto border-b " +
    "data-starting-style:-translate-y-full data-ending-style:-translate-y-full",
  bottom:
    "inset-x-0 bottom-0 h-auto border-t " +
    "data-starting-style:translate-y-full data-ending-style:translate-y-full",
} as const;

export interface SheetContentProps extends SheetPrimitive.Popup.Props {
  /** Edge the sheet is pinned to. @default "right" */
  side?: "top" | "right" | "bottom" | "left";
  /** @default true */
  showCloseButton?: boolean;
  /** See DialogContent — retargets the portal so brand tokens are inherited. */
  container?: SheetPrimitive.Portal.Props["container"];
}

function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  container,
  ...props
}: SheetContentProps) {
  return (
    <SheetPortal container={container}>
      <SheetOverlay />
      <SheetPrimitive.Popup
        data-slot="sheet-content"
        data-side={side}
        className={cn(
          "fixed z-50 flex flex-col gap-4",
          "border-(color:--color-border) bg-(color:--color-surface-raised)",
          "text-(length:--font-size-control) leading-(--line-height-control) text-(color:--color-content)",
          "shadow-lg outline-none",
          // Transition, not keyframes — same reason as Dialog: Base UI waits for
          // the exit to finish before unmounting, and a transition always
          // finishes where an animation in a non-rendering tab does not.
          "transition-[opacity,transform] duration-(--motion-duration) ease-(--motion-ease)",
          "data-starting-style:opacity-0 data-ending-style:opacity-0",
          sideClasses[side],
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <SheetPrimitive.Close
            data-slot="sheet-close"
            render={<Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />}
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </SheetPrimitive.Close>
        )}
      </SheetPrimitive.Popup>
    </SheetPortal>
  );
}

function SheetHeader({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props}
    />
  );
}

function SheetFooter({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  );
}

function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn(
        "text-(length:--font-size-title) leading-snug font-medium",
        className,
      )}
      {...props}
    />
  );
}

function SheetDescription({
  className,
  ...props
}: SheetPrimitive.Description.Props) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn(
        "text-(length:--font-size-control) leading-(--line-height-control) text-(color:--color-content-muted)",
        className,
      )}
      {...props}
    />
  );
}

export {
  Sheet,
  SheetTrigger,
  SheetPortal,
  SheetClose,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
};