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

type MobileScaffoldProps = {
  title: string;
  onBack?: () => void;
  rightSlot?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
};

export function MobileScaffold({ title, onBack, rightSlot, children, footer }: MobileScaffoldProps) {
  const { t } = useTranslation('mobile');
  const theme = useTheme();
  const background = String(theme.background?.val ?? '#f7f8fb');
  const surface = String(theme.surface?.val ?? '#ffffff');
  const border = String(theme.borderColor?.val ?? '#e5e7eb');
  const textColor = String(theme.color?.val ?? '#111827');

  return (
    <YStack backgroundColor={background} minHeight="100vh">
      <XStack
        alignItems="center"
        justifyContent="space-between"
        paddingHorizontal="$4"
        paddingTop="$4"
        paddingBottom="$3"
        backgroundColor={surface}
        borderBottomWidth={1}
        borderColor={border}
      >
        <XStack alignItems="center" space="$2">
          {onBack ? (
            <Pressable onPress={onBack}>
              <XStack alignItems="center" space="$1.5">
                <ChevronLeft size={18} color={String(theme.primary?.val ?? '#007AFF')} />
                <Text fontSize="$sm" color={String(theme.primary?.val ?? '#007AFF')} fontWeight="600">
                  {t('actions.back', 'Back')}
                </Text>
              </XStack>
            </Pressable>
          ) : (
            <Text />
          )}
        </XStack>
        <Text fontSize="$lg" fontWeight="800" color={textColor}>
          {title}
        </Text>
        <XStack minWidth={40} justifyContent="flex-end">
          {rightSlot ?? null}
        </XStack>
      </XStack>

      <YStack flex={1} padding="$4" space="$3" paddingBottom={footer ? '$14' : '$5'}>
        {children}
      </YStack>

      {footer ? <YStack>{footer}</YStack> : null}
    </YStack>
  );
}