"use client";

import * as React from "react";
import { Dialog as SheetPrimitive } from "radix-ui";
import { IconX } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { Button } from "./button";
import { liquidMenuSurfaceClasses } from "./liquid-menu-surface";

/**
 * A panel that slides in from an edge: record details, filters, settings.
 * Built on the dialog primitive, so focus is trapped and Escape closes it.
 */
export function Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}

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

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

export function SheetContent({
  className,
  children,
  side = "right",
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & { side?: "right" | "left" | "bottom" }) {
  return (
    <SheetPrimitive.Portal>
      <SheetPrimitive.Overlay className="coline-dialog-overlay fixed inset-0 z-50 bg-black/25 supports-backdrop-filter:backdrop-blur-[2px]" />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        data-side={side}
        className={cn(
          "coline-sheet fixed z-50 flex flex-col gap-4 p-5 text-sm outline-none",
          liquidMenuSurfaceClasses,
          side === "right" && "inset-y-2 right-2 w-[min(28rem,calc(100vw-1rem))]",
          side === "left" && "inset-y-2 left-2 w-[min(28rem,calc(100vw-1rem))]",
          side === "bottom" && "inset-x-2 bottom-2 max-h-[85dvh]",
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close asChild>
          <Button variant="ghost" size="icon-sm" className="absolute top-3.5 right-3.5">
            <IconX />
            <span className="sr-only">Close</span>
          </Button>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPrimitive.Portal>
  );
}

export function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="sheet-header" className={cn("flex flex-col gap-1 pr-8", className)} {...props} />;
}

export function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn("text-base font-semibold tracking-tight text-foreground", className)}
      {...props}
    />
  );
}

export function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  );
}

export function SheetBody({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="sheet-body" className={cn("-mx-5 min-h-0 flex-1 overflow-y-auto px-5", className)} {...props} />;
}

export function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("-mx-5 -mb-5 mt-auto flex items-center justify-end gap-2 border-t border-border/60 px-5 py-3", className)}
      {...props}
    />
  );
}