import { useState } from 'react';
import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
import { useRouter } from 'expo-router';
import { useTranslation } from 'react-i18next';
import * as Notifications from 'expo-notifications';

import { setPushPromptState } from '@/src/storage/appStorage';

export default function PushPromptScreen() {
  const router = useRouter();
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);

  async function goHome() {
    router.replace('/(app)/home');
  }

  async function onLater() {
    await setPushPromptState('skipped');
    await goHome();
  }

  async function onEnableNow() {
    // 触发系统权限申请（可失败，但不阻塞进入主功能）
    setLoading(true);
    try {
      await Notifications.requestPermissionsAsync();
      await setPushPromptState('enabled');
      await goHome();
    } catch (e) {
      Alert.alert(t('push.errorTitle'), t('push.errorDesc'));
      await goHome();
    } finally {
      setLoading(false);
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.title}>{t('push.cardTitle')}</Text>
        <Text style={styles.desc}>{t('push.cardDesc')}</Text>
      </View>

      <View style={styles.actions}>
        <Pressable style={[styles.btn, styles.secondary]} onPress={onLater} disabled={loading}>
          <Text style={[styles.btnText, styles.secondaryText]}>{t('push.later')}</Text>
        </Pressable>
        <Pressable style={[styles.btn, styles.primary]} onPress={onEnableNow} disabled={loading}>
          <Text style={styles.btnText}>{loading ? t('push.loading') : t('push.enable')}</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center', gap: 16 },
  card: {
    borderRadius: 18,
    padding: 20,
    backgroundColor: '#111827',
    gap: 10
  },
  title: { color: 'white', fontSize: 20, fontWeight: '700' },
  desc: { color: '#E5E7EB', fontSize: 15, lineHeight: 21 },
  actions: { flexDirection: 'row', gap: 12 },
  btn: { flex: 1, paddingVertical: 14, borderRadius: 14, alignItems: 'center' },
  primary: { backgroundColor: '#16A34A' },
  secondary: { backgroundColor: '#F3F4F6' },
  btnText: { fontSize: 16, fontWeight: '600', color: '#FFFFFF' },
  secondaryText: { color: '#111827' }
});