import React from 'react';
import { Button } from '@tamagui/button';
import { Plus } from 'lucide-react';
import { useAppearance } from '@/hooks/use-appearance';

type FloatingActionButtonProps = {
  onPress: () => void;
  onLongPress?: () => void;
};

export default function FloatingActionButton({ onPress, onLongPress }: FloatingActionButtonProps) {
  const longPressTriggered = React.useRef(false);
  const { resolved } = useAppearance();
  const isDark = resolved === 'dark';

  return (
    <Button
      onPress={() => {
        if (longPressTriggered.current) {
          longPressTriggered.current = false;
          return;
        }
        onPress();
      }}
      onPressIn={() => {
        longPressTriggered.current = false;
      }}
      onLongPress={() => {
        longPressTriggered.current = true;
        onLongPress?.();
      }}
      position="fixed"
      bottom={88}
      right={20}
      zIndex={1100}
      width={56}
      height={56}
      borderRadius={999}
      backgroundColor="$primary"
      borderWidth={0}
      elevation={4}
      shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
      shadowOpacity={0.5}
      shadowRadius={18}
      shadowOffset={{ width: 0, height: 10 }}
      style={{
        boxShadow: isDark
          ? '0 18px 36px rgba(255, 79, 216, 0.35), 0 0 0 6px rgba(255, 79, 216, 0.15)'
          : '0 16px 28px rgba(15, 23, 42, 0.18), 0 0 0 6px rgba(255, 255, 255, 0.7)',
      }}
    >
      <Plus size={22} color="white" />
    </Button>
  );
}