import { View, Text, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';

/**
 * Shown when the backend returns a device-limit error (HTTP 403 with device_limit_reached).
 * Phase 2: static info + redirect to sign-in.
 * Phase 4+: integrate with device-management store to show active devices + revoke option.
 */
export default function DeviceLimitScreen() {
  const router = useRouter();
  const { t } = useTranslation();

  return (
    <SafeAreaView className="flex-1 bg-white">
      <View className="flex-1 items-center justify-center px-6 text-center">
        <Text className="text-5xl mb-4" style={{ fontFamily: 'Nunito_400Regular' }}>&#x1F4F1;</Text>
        <Text className="text-xl text-neutral-900 mb-3 text-center" style={{ fontFamily: 'Nunito_700Bold' }}>
          {t('auth.deviceLimitTitle')}
        </Text>
        <Text className="text-sm text-neutral-500 text-center leading-6 max-w-xs mb-8" style={{ fontFamily: 'Nunito_400Regular' }}>
          {t('auth.deviceLimitDesc')}
        </Text>

        {/* TODO Phase 4: device management — list active devices + revoke button */}

        <TouchableOpacity
          onPress={() => router.replace('/signin')}
          activeOpacity={0.8}
          className="bg-rebreak-500 px-8 py-4 rounded-xl"
        >
          <Text className="text-white text-base" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.toLogin')}</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => router.push('/signin')}
          activeOpacity={0.7}
          className="py-3 mt-2"
        >
          <Text className="text-neutral-500 text-sm" style={{ fontFamily: 'Nunito_400Regular' }}>{t('auth.deviceLimitUpgrade')}</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}