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 { useTranslation } from 'react-i18next';
import { useTheme } from '@tamagui/core';

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

export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
  const { t } = useTranslation('mobile');
  const theme = useTheme();
  const surface = String(theme.surface?.val ?? '#111827');
  const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
  const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#cbd5e1');
  const overlay = String(theme.gray12?.val ?? 'rgba(0,0,0,0.6)');

  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center backdrop-blur-sm" style={{ backgroundColor: `${overlay}66` }}>
      <YStack
        width="100%"
        maxWidth={520}
        borderTopLeftRadius={24}
        borderTopRightRadius={24}
        backgroundColor={surface}
        padding="$4"
        paddingBottom="$7"
        space="$3"
        shadowColor="#0f172a"
        shadowOpacity={0.12}
        shadowRadius={18}
        shadowOffset={{ width: 0, height: -8 }}
        maxHeight="82vh"
        overflow="auto"
        // keep sheet above bottom nav / safe area
        style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
      >
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$md" fontWeight="800" color={text}>
            {title}
          </Text>
          <Pressable onPress={onClose}>
            <Text fontSize="$md" color={muted}>
              {t('actions.close', 'Close')}
            </Text>
          </Pressable>
        </XStack>
        {children}
        {footer ? footer : null}
      </YStack>
    </div>
  );
}