import React from 'react';
import { YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { useGuestThemeVariant } from '../lib/guestTheme';

export type CompassAction = {
  key: string;
  label: string;
  icon?: React.ReactNode;
  onPress?: () => void;
};

type CompassHubProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  quadrants: [CompassAction, CompassAction, CompassAction, CompassAction];
  centerAction: CompassAction;
  title?: string;
};

const quadrantPositions: Array<{
  top?: number;
  right?: number;
  bottom?: number;
  left?: number;
}> = [
  { top: 0, left: 0 },
  { top: 0, right: 0 },
  { bottom: 0, left: 0 },
  { bottom: 0, right: 0 },
];

export default function CompassHub({
  open,
  onOpenChange,
  quadrants,
  centerAction,
  title = 'Quick jump',
}: CompassHubProps) {
  const close = () => onOpenChange(false);
  const { isDark } = useGuestThemeVariant();
  const [visible, setVisible] = React.useState(open);
  const [closing, setClosing] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setVisible(true);
      setClosing(false);
      return;
    }

    if (!visible) return;
    setClosing(true);
    const timeout = window.setTimeout(() => {
      setVisible(false);
      setClosing(false);
    }, 520);

    return () => {
      window.clearTimeout(timeout);
    };
  }, [open, visible]);

  if (!visible) {
    return null;
  }

  return (
    <YStack position="fixed" inset={0} zIndex={100000} pointerEvents="box-none">
      <YStack
        position="absolute"
        inset={0}
        backgroundColor={isDark ? 'rgba(15, 23, 42, 0.55)' : 'rgba(15, 23, 42, 0.22)'}
        pointerEvents="auto"
        onPress={close}
        onClick={close}
        onMouseDown={close}
        onTouchStart={close}
      />
      <YStack
        position="absolute"
        inset={0}
        padding={24}
        alignItems="center"
        justifyContent="center"
        pointerEvents="box-none"
      >
        <YStack alignItems="center" justifyContent="center" gap="$3" pointerEvents="auto">
          <Text fontSize="$5" fontFamily="$display" fontWeight="$8" color="$color">
            {title}
          </Text>
          <YStack
            key={closing ? 'compass-out' : 'compass-in'}
            width={280}
            height={280}
            position="relative"
            className={closing ? 'guest-compass-flyout' : 'guest-compass-flyin'}
          >
            {quadrants.map((action, index) => (
              <Button
                key={action.key}
                onPress={() => {
                  action.onPress?.();
                  close();
                }}
                width={120}
                height={120}
                borderRadius={24}
                backgroundColor="$surface"
                borderWidth={1}
                borderColor="$borderColor"
                position="absolute"
                {...quadrantPositions[index]}
              >
                <YStack alignItems="center" gap="$2">
                  {action.icon}
                  <Text fontSize="$3" fontWeight="$7">
                    {action.label}
                  </Text>
                </YStack>
              </Button>
            ))}

            <Button
              onPress={() => {
                centerAction.onPress?.();
                close();
              }}
              width={90}
              height={90}
              borderRadius={45}
              backgroundColor="$primary"
              position="absolute"
              top="50%"
              left="50%"
              style={{ transform: 'translate(-45px, -45px)' }}
            >
              <YStack alignItems="center" gap="$1">
                {centerAction.icon}
                <Text fontSize="$2" fontWeight="$7" color="white">
                  {centerAction.label}
                </Text>
              </YStack>
            </Button>
          </YStack>
          <Text fontSize="$2" color="$color" opacity={0.6}>
            Tap outside to close
          </Text>
        </YStack>
      </YStack>
    </YStack>
  );
}