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 { withAlpha } from './colors';
import { useAdminTheme } from '../theme';

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 { background, surface, border, text, primary, glassSurfaceStrong, glassBorder, appBackground } = useAdminTheme();
  const headerSurface = glassSurfaceStrong ?? withAlpha(surface, 0.94);
  const headerBorder = glassBorder ?? border;

  return (
    <YStack backgroundColor={background} minHeight="100vh" style={{ background: appBackground }}>
      <XStack
        alignItems="center"
        justifyContent="space-between"
        paddingHorizontal="$4"
        paddingTop="$4"
        paddingBottom="$3"
        backgroundColor={headerSurface}
        borderBottomWidth={1}
        borderColor={headerBorder}
        position="sticky"
        top={0}
        zIndex={60}
        style={{
          paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
        }}
      >
        <XStack alignItems="center" space="$2">
          {onBack ? (
            <Pressable onPress={onBack}>
              <XStack alignItems="center" space="$1.5">
                <ChevronLeft size={18} color={primary} />
                <Text fontSize="$sm" color={primary} fontWeight="600">
                  {t('actions.back', 'Back')}
                </Text>
              </XStack>
            </Pressable>
          ) : (
            <Text />
          )}
        </XStack>
        <Text fontSize="$lg" fontWeight="800" color={text}>
          {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>
  );
}