import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Sheet } from '@tamagui/sheet';
import { useTranslation } from 'react-i18next';
import { useAdminTheme } from '../theme';

type SheetProps = {
  open: boolean;
  title: string;
  onClose: () => void;
  children: React.ReactNode;
  footer?: React.ReactNode;
  snapPoints?: number[];
  contentSpacing?: string;
  padding?: string;
  paddingBottom?: string;
  /** Optional bottom offset so content sits above the bottom nav/safe-area. */
  bottomOffsetPx?: number;
};

export function MobileSheet({
  open,
  title,
  onClose,
  children,
  footer,
  snapPoints = [82],
  contentSpacing = '$3',
  padding = '$4',
  paddingBottom = '$7',
  bottomOffsetPx = 88,
}: SheetProps) {
  const { t } = useTranslation('mobile');
  const { surface, textStrong, muted, overlay, shadow, border } = useAdminTheme();
  const bottomOffset = `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)`;

  return (
    <Sheet
      modal
      open={open}
      onOpenChange={(next: boolean) => {
        if (!next) {
          onClose();
        }
      }}
      snapPoints={snapPoints}
      snapPointsMode="percent"
      dismissOnOverlayPress
      dismissOnSnapToBottom
      zIndex={100000}
      animation="lazy"
    >
      <Sheet.Overlay
        animation="lazy"
        enterStyle={{ opacity: 0 }}
        exitStyle={{ opacity: 0 }}
        backgroundColor={overlay}
      />
      <Sheet.Frame
        width="100%"
        maxWidth={520}
        alignSelf="center"
        borderTopLeftRadius={24}
        borderTopRightRadius={24}
        backgroundColor={surface}
        padding={padding}
        paddingBottom={paddingBottom}
        shadowColor={shadow}
        shadowOpacity={0.12}
        shadowRadius={18}
        shadowOffset={{ width: 0, height: -8 }}
        style={{ marginBottom: bottomOffset }}
      >
        <Sheet.Handle height={5} width={48} backgroundColor={border} borderRadius={999} marginBottom="$3" />
        <Sheet.ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: 6 }}
        >
          <YStack gap={contentSpacing}>
            <XStack alignItems="center" justifyContent="space-between">
              <Text fontSize="$md" fontWeight="800" color={textStrong}>
                {title}
              </Text>
              <Pressable onPress={onClose}>
                <Text fontSize="$md" color={muted}>
                  {t('actions.close', 'Close')}
                </Text>
              </Pressable>
            </XStack>
            {children}
            {footer ? footer : null}
          </YStack>
        </Sheet.ScrollView>
      </Sheet.Frame>
    </Sheet>
  );
}
