Sheet

"use client";

import * as React from "react";
import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const Button = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement> & {
    variant?: "primary" | "secondary" | "ghost";
    leftIcon?: React.ReactNode;
  }
>(function Button({ variant = "primary", leftIcon, className, children, ...props }, ref) {
  return (
    <button
      ref={ref}
      type="button"
      className={cn(
        "inline-flex h-9 items-center justify-center gap-2 rounded-[10px] px-4 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] [&_svg]:size-4",
        variant === "primary" && "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90",
        variant === "secondary" && "border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)] hover:bg-[var(--muted)]",
        variant === "ghost" && "text-[var(--foreground)] hover:bg-[var(--muted)]",
        className,
      )}
      {...props}
    >
      {leftIcon}
      {children}
    </button>
  );
});

function Switch({ label, defaultChecked = false }: { label: string; defaultChecked?: boolean }) {
  const [on, setOn] = React.useState(defaultChecked);
  return (
    <label className="flex cursor-pointer items-center justify-between gap-4 text-sm text-[var(--foreground)]">
      {label}
      <button
        type="button"
        role="switch"
        aria-checked={on}
        onClick={() => setOn((v) => !v)}
        className={cn(
          "relative h-5 w-9 shrink-0 rounded-full transition-colors",
          on ? "bg-[var(--primary)]" : "bg-[var(--muted)]",
        )}
      >
        <span
          className={cn(
            "absolute top-0.5 left-0.5 size-4 rounded-full bg-[var(--background)] shadow-sm transition-transform",
            on && "translate-x-4",
          )}
        />
      </button>
    </label>
  );
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;

function DemoFrame({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <div className={cn(wensityCardSurfaceClass, "w-full max-w-md p-5")}>
      <div className="mb-4 border-b border-[var(--border)] pb-3">
        <p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
          {title}
        </p>
        {subtitle ? (
          <p className="mt-1 text-[12px] text-[var(--muted-foreground)]">{subtitle}</p>
        ) : null}
      </div>
      {children}
      <p className="mt-4 text-center text-[11px] text-[var(--muted-foreground)]">
        Opens as a full-viewport overlay
      </p>
    </div>
  );
}

function SheetDemo({
  side,
  persistent,
  triggerLabel,
}: {
  side: "left" | "right" | "top" | "bottom";
  persistent?: boolean;
  triggerLabel: string;
}) {
  return (
    <Sheet persistent={persistent} defaultOpen>
      <SheetTrigger asChild>
        <Button variant="secondary">{triggerLabel}</Button>
      </SheetTrigger>
      <SheetContent side={side} accessibilityTitle="Filters">
        <SheetHeader>
          <SheetTitle>Filters</SheetTitle>
          <SheetDescription>Refine the component directory.</SheetDescription>
        </SheetHeader>
        <SheetBody className="space-y-4">
          <Switch defaultChecked label="UI Primitives only" />
          <Switch label="Show Pro components" />
          <Switch defaultChecked label="Include templates" />
        </SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button className="w-full">Apply filters</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

export function SheetPreview() {
  return (
    <DemoFrame title="Right sheet" subtitle="Slides in from the edge with drawer easing.">
      <SheetDemo side="right" triggerLabel="Open filters" />
    </DemoFrame>
  );
}

export default function Demo() {
  return <SheetPreview />;
}