import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
import { cn } from "../utils/cn";
import React from "react";
import { Platform, View, type ViewStyle } from "react-native";

const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => {
  const content = (
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border dark:border-neutral-800 bg-popover dark:bg-black p-1",
        className
      )}
      style={
        Platform.OS === "web"
          ? ({ boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)" } as ViewStyle &
              Record<string, unknown>)
          : undefined
      }
      {...props}
    />
  );

  if (Platform.OS === "web") {
    // On web, Portal expects exactly one child — skip the Overlay (Radix
    // handles dismiss-on-click-outside internally).
    return <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>;
  }

  return (
    <DropdownMenuPrimitive.Portal>
      {/* absolute inset-0: without explicit full-screen sizing this
          renders at its default (shrink-to-fit) size — effectively
          zero-area, so it never actually intercepts a tap anywhere
          outside the menu content itself. The primitive's own
          onPress-closes-on-tap behavior was always correct; it just
          never had anything to receive that tap. Reported as "tapping
          elsewhere doesn't dismiss the dropdown," 2026-08-17. */}
      <DropdownMenuPrimitive.Overlay className="absolute inset-0 animate-in fade-in-0" />
      {content}
    </DropdownMenuPrimitive.Portal>
  );
});
DropdownMenuContent.displayName = "DropdownMenuContent";

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex flex-row items-center rounded-sm px-2 py-1.5 web:cursor-pointer web:outline-none active:bg-accent dark:active:bg-neutral-800",
      "web:hover:bg-accent web:focus:bg-accent dark:web:hover:bg-neutral-800 dark:web:focus:bg-neutral-800",
      props.disabled && "opacity-50 web:pointer-events-none",
      className
    )}
    {...props}
  />
));
DropdownMenuItem.displayName = "DropdownMenuItem";

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex flex-row items-center rounded-sm py-1.5 pl-8 pr-2 web:cursor-pointer web:outline-none active:bg-accent",
      "web:hover:bg-accent web:focus:bg-accent",
      props.disabled && "opacity-50 web:pointer-events-none",
      className
    )}
    checked={checked}
    {...props}
  >
    <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        {/* Checkmark indicator */}
      </DropdownMenuPrimitive.ItemIndicator>
    </View>
    {children as React.ReactNode}
  </DropdownMenuPrimitive.CheckboxItem>
));
DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground dark:text-white", className)}
    {...props}
  />
));
DropdownMenuLabel.displayName = "DropdownMenuLabel";

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border dark:bg-neutral-800", className)}
    {...props}
  />
));
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
};