"use client";

import * as React from "react";
import { Info, Settings2, X } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetTitle,
} from "@/components/ui/sheet";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

type WidgetConfigSheetProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  children: React.ReactNode;
  footer?: React.ReactNode;
  eyebrow?: string;
  title: string;
  description: string;
  size?: "default" | "wide";
  className?: string;
};

/** Hover-only hint — ignores focus so sheet autofocus does not pop the tooltip open. */
function ConfigHintTooltip({
  description,
  sheetOpen,
}: {
  description: string;
  sheetOpen: boolean;
}) {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (!sheetOpen) setOpen(false);
  }, [sheetOpen]);

  return (
    <Tooltip open={open}>
      <TooltipTrigger asChild>
        <span
          className="inline-flex size-6 shrink-0 cursor-default items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          aria-hidden="true"
          onPointerEnter={() => setOpen(true)}
          onPointerLeave={() => setOpen(false)}
        >
          <Info className="size-3.5" />
        </span>
      </TooltipTrigger>
      <TooltipContent side="bottom" className="max-w-[240px] text-xs leading-relaxed">
        {description}
      </TooltipContent>
    </Tooltip>
  );
}

/**
 * Right-side widget configuration drawer — matches Cards / Filters sheet chrome.
 */
export function WidgetConfigSheet({
  open,
  onOpenChange,
  children,
  footer,
  eyebrow = "Widget",
  title,
  description,
  size = "default",
  className,
}: WidgetConfigSheetProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        className={cn(
          "flex h-dvh w-full flex-col gap-0 overflow-hidden bg-muted/30 p-0",
          size === "wide" ? "data-[side=right]:sm:max-w-2xl" : "data-[side=right]:sm:max-w-md",
          className,
        )}
        showCloseButton={false}
      >
        <div className="shrink-0 space-y-2 px-4 pt-4">
          <p className="text-muted-foreground text-[10px] font-semibold tracking-widest uppercase">
            {eyebrow}
          </p>
          <div className="flex items-center justify-between gap-2">
            <SheetTitle className="flex min-w-0 items-center gap-2 text-left text-base font-semibold tracking-tight">
              <span className="flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-md shadow-primary/25">
                <Settings2 className="size-3.5" />
              </span>
              <span className="truncate">{title}</span>
              <TooltipProvider delayDuration={200}>
                <ConfigHintTooltip description={description} sheetOpen={open} />
              </TooltipProvider>
            </SheetTitle>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              className="rounded-lg"
              onClick={() => onOpenChange(false)}
              aria-label="Close configuration"
            >
              <X className="size-4" />
            </Button>
          </div>
          <SheetDescription className="sr-only">{description}</SheetDescription>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-4 py-2">{children}</div>

        {footer ? (
          <div className="shrink-0 border-t border-border/60 bg-card/80 px-4 py-3 backdrop-blur-md">
            {footer}
          </div>
        ) : null}
      </SheetContent>
    </Sheet>
  );
}