import React from 'react';
import { Download, Share2 } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { useTheme } from '@tamagui/core';
import { InstallBannerState } from '../lib/installBanner';
import { CTAButton, MobileCard } from './Primitives';
import { useTranslation } from 'react-i18next';

type MobileInstallBannerProps = {
  state: InstallBannerState | null;
  onInstall?: () => void;
};

export function MobileInstallBanner({ state, onInstall }: MobileInstallBannerProps) {
  const { t } = useTranslation('common');
  const theme = useTheme();
  const text = String(theme.color12?.val ?? theme.color?.val ?? '#0f172a');
  const muted = String(theme.gray11?.val ?? theme.gray?.val ?? '#6b7280');
  const border = String(theme.borderColor?.val ?? '#e5e7eb');
  const accent = String(theme.primary?.val ?? '#2563eb');

  if (!state) {
    return null;
  }

  const isPrompt = state.variant === 'prompt';

  return (
    <MobileCard space="$2" borderColor={border} backgroundColor={String(theme.blue2?.val ?? '#eff6ff')}>
      <XStack alignItems="center" justifyContent="space-between" gap="$2">
        <XStack alignItems="center" space="$2" flex={1}>
          <XStack
            width={36}
            height={36}
            borderRadius={12}
            alignItems="center"
            justifyContent="center"
            backgroundColor={String(theme.blue3?.val ?? '#dbeafe')}
          >
            {isPrompt ? <Download size={18} color={accent} /> : <Share2 size={18} color={accent} />}
          </XStack>
          <YStack flex={1} space="$0.5">
            <Text fontSize="$sm" fontWeight="800" color={text}>
              {t('installBanner.title', 'Install Fotospiel Admin')}
            </Text>
            <Text fontSize="$xs" color={muted}>
              {isPrompt
                ? t('installBanner.body', 'Add the app to your home screen for faster access and offline support.')
                : t('installBanner.iosHint', 'On iOS: Share → Add to Home Screen.')}
            </Text>
          </YStack>
        </XStack>
      </XStack>
      {isPrompt && onInstall ? (
        <CTAButton
          label={t('installBanner.action', 'Install')}
          onPress={onInstall}
          fullWidth={false}
          tone="ghost"
        />
      ) : null}
    </MobileCard>
  );
}