import { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  StyleSheet,
  Pressable,
  Platform,
} from "react-native";
import Colors from "@/constants/colors";

export interface DropdownMenuItem {
  label: string;
  icon?: React.ComponentType<{ color?: string; size?: number }>;
  onPress: () => void;
  destructive?: boolean;
}

interface DropdownMenuProps {
  trigger: React.ReactNode;
  items: DropdownMenuItem[];
  align?: "left" | "right";
}

// A lightweight dropdown - tap the trigger, get a small floating menu under
// it. Built as a Modal so it sits above everything else and closes on an
// outside tap, the same behavior as a native dropdown.
export function DropdownMenu({ trigger, items, align = "right" }: DropdownMenuProps) {
  const [visible, setVisible] = useState(false);
  const [anchor, setAnchor] = useState({ x: 0, y: 0, width: 0, height: 0 });

  return (
    <>
      <View
        onLayout={(e) => {
          const { x, y, width, height } = e.nativeEvent.layout;
          setAnchor({ x, y, width, height });
        }}
      >
        <TouchableOpacity onPress={() => setVisible(true)} activeOpacity={0.7}>
          {trigger}
        </TouchableOpacity>
      </View>

      <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
        <Pressable style={styles.backdrop} onPress={() => setVisible(false)}>
          <View
            style={[
              styles.menu,
              align === "right" ? { right: 16, top: anchor.y + anchor.height + 44 } : { left: 16, top: anchor.y + anchor.height + 44 },
            ]}
          >
            {items.map((item, index) => {
              const Icon = item.icon;
              return (
                <TouchableOpacity
                  key={index}
                  style={[
                    styles.menuItem,
                    index !== items.length - 1 && styles.menuItemBorder,
                  ]}
                  onPress={() => {
                    setVisible(false);
                    item.onPress();
                  }}
                >
                  {Icon && (
                    <Icon
                      color={item.destructive ? Colors.dark.error : Colors.dark.text}
                      size={18}
                    />
                  )}
                  <Text
                    style={[
                      styles.menuItemText,
                      item.destructive && styles.menuItemTextDestructive,
                    ]}
                  >
                    {item.label}
                  </Text>
                </TouchableOpacity>
              );
            })}
          </View>
        </Pressable>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
  },
  menu: {
    position: "absolute" as const,
    backgroundColor: Colors.dark.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    minWidth: 190,
    paddingVertical: 4,
    ...Platform.select({
      web: {
        boxShadow: "0px 4px 16px rgba(0,0,0,0.25)",
      },
      default: {
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.25,
        shadowRadius: 12,
        elevation: 8,
      },
    }),
  },
  menuItem: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 10,
    paddingVertical: 12,
    paddingHorizontal: 14,
  },
  menuItemBorder: {
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  menuItemText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  menuItemTextDestructive: {
    color: Colors.dark.error,
  },
});