"use client";
import * as React from "react";
import { MoreHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ActionSheet, type ActionSheetItem } from "@/components/ui/sheet";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { useIsMobile } from "@/lib/client/hooks";
import { cn } from "@/lib/utils";

/**
 * "⋯" actions for a list row / card. Phone: 44 px button + ActionSheet (also opened by the row's long-press through
 * the controlled `open` prop). Desktop: hover-revealed icon button + dropdown.
 */
export function RowMenu({ items, title, open, onOpenChange, className, alwaysVisible }: { items: (ActionSheetItem | "separator")[]; title?: string; open?: boolean; onOpenChange?: (o: boolean) => void; className?: string; alwaysVisible?: boolean }) {
  const isMobile = useIsMobile();
  const [inner, setInner] = React.useState(false);
  const isOpen = open ?? inner;
  const setOpen = onOpenChange ?? setInner;
  const label = title ? `Actions for ${title}` : "Actions";

  if (isMobile) {
    return (
      <>
        <Button
          variant="ghost"
          size="icon"
          className={cn("tap shrink-0 text-fg-subtle", className)}
          aria-label={label}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            setOpen(true);
          }}
        >
          <MoreHorizontal />
        </Button>
        <ActionSheet open={isOpen} onOpenChange={setOpen} title={title} items={items} />
      </>
    );
  }

  return (
    <DropdownMenu open={isOpen} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon-sm" className={cn("shrink-0 text-fg-subtle", !alwaysVisible && "hover-reveal", className)} aria-label={label} onClick={(e) => e.stopPropagation()}>
          <MoreHorizontal />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56" onClick={(e) => e.stopPropagation()}>
        {items.map((it, i) =>
          it === "separator" ? (
            <DropdownMenuSeparator key={`sep-${i}`} />
          ) : (
            <DropdownMenuItem key={it.key} disabled={it.disabled} destructive={it.destructive} onSelect={it.onSelect}>
              {it.icon}
              <span className="min-w-0 flex-1 truncate">{it.label}</span>
              {it.hint ? <span className="text-[11px] text-fg-subtle">{it.hint}</span> : null}
              {it.selected ? <span className="text-accent">✓</span> : null}
            </DropdownMenuItem>
          ),
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}