/**
 * Sheet — WealthX DS overrides (shadcn / base-ui dialog)
 *
 * Changes from shadcn default:
 *   - SheetOverlay:  `bg-black/50` -- `bg-foreground/50` — DS foreground token (matches Figma)
 *   - SheetContent:  `shadow-lg` removed — flat panels per Figma
 *   - SheetTitle:    added `text-lg` — matches Figma Text-lg/Semibold
 *   - Close button:  matches DialogClose — no radius, `hover:bg-foreground/5`, `focus:ring-border`
 */
import { type ReactElement } from "react";
import * as React from "react";
import { XIcon } from "lucide-react";
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
import { cn } from "@/lib/utils";
import { asChildProps } from "@/lib/as-child";
import { useThemeVars } from "@/lib/theme-provider";

// ---------------------------------------------------------------------------
// Side-specific panel classes
// ---------------------------------------------------------------------------

const SIDE_CLASSES = {
  right:
    "inset-y-0 right-0 h-full w-1/2 border-l data-ending-style:slide-out-to-right data-open:slide-in-from-right",
  left: "inset-y-0 left-0 h-full w-1/2 border-r data-ending-style:slide-out-to-left data-open:slide-in-from-left",
  top: "inset-x-0 top-0 h-auto border-b data-ending-style:slide-out-to-top data-open:slide-in-from-top",
  bottom:
    "inset-x-0 bottom-0 h-auto border-t data-ending-style:slide-out-to-bottom data-open:slide-in-from-bottom",
} satisfies Record<string, string>;

// ---------------------------------------------------------------------------
// Components
// ---------------------------------------------------------------------------

export type SheetProps = React.ComponentProps<typeof SheetPrimitive.Root>;

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

export type SheetTriggerProps = React.ComponentProps<
  typeof SheetPrimitive.Trigger
> & {
  /** shadcn-compatible alias for Base UI's `render`: replaces the trigger with its single child. */
  asChild?: boolean;
};

function SheetTrigger({
  asChild,
  children,
  ...props
}: SheetTriggerProps): ReactElement {
  return (
    <SheetPrimitive.Trigger
      data-slot="sheet-trigger"
      {...props}
      {...asChildProps(asChild, children)}
    />
  );
}

export type SheetCloseProps = React.ComponentProps<typeof SheetPrimitive.Close>;

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

export type SheetPortalProps = React.ComponentProps<
  typeof SheetPrimitive.Portal
>;

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

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Backdrop>): ReactElement {
  return (
    <SheetPrimitive.Backdrop
      className={cn(
        "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
        className,
      )}
      data-slot="sheet-overlay"
      {...props}
    />
  );
}

export type SheetContentProps = React.ComponentProps<
  typeof SheetPrimitive.Popup
> & {
  side?: keyof typeof SIDE_CLASSES;
  showCloseButton?: boolean;
};

function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  style,
  ...props
}: SheetContentProps): ReactElement {
  const themeVars = useThemeVars();
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Popup
        className={cn(
          "fixed z-50 flex flex-col gap-4 bg-background transition ease-in-out data-ending-style:animate-out data-ending-style:duration-300 data-ending-style:fill-mode-forwards data-open:animate-in data-open:duration-500",
          SIDE_CLASSES[side],
          className,
        )}
        data-slot="sheet-content"
        style={{ ...themeVars, ...style } as React.CSSProperties}
        {...props}
      >
        {children}
        {showCloseButton ? (
          <SheetPrimitive.Close
            className="absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
            data-slot="sheet-icon-close"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </SheetPrimitive.Close>
        ) : null}
      </SheetPrimitive.Popup>
    </SheetPortal>
  );
}

export type SheetHeaderProps = React.ComponentProps<"div">;

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

export type SheetFooterProps = React.ComponentProps<"div">;

function SheetFooter({ className, ...props }: SheetFooterProps): ReactElement {
  return (
    <div
      className={cn(
        "mt-auto flex flex-row justify-end gap-2 border-t border-border p-4",
        className,
      )}
      data-slot="sheet-footer"
      {...props}
    />
  );
}

export type SheetTitleProps = React.ComponentProps<typeof SheetPrimitive.Title>;

function SheetTitle({ className, ...props }: SheetTitleProps): ReactElement {
  return (
    <SheetPrimitive.Title
      className={cn("text-lg font-semibold text-foreground", className)}
      data-slot="sheet-title"
      {...props}
    />
  );
}

export type SheetDescriptionProps = React.ComponentProps<
  typeof SheetPrimitive.Description
>;

function SheetDescription({
  className,
  ...props
}: SheetDescriptionProps): ReactElement {
  return (
    <SheetPrimitive.Description
      className={cn("text-body-small text-muted-foreground", className)}
      data-slot="sheet-description"
      {...props}
    />
  );
}

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