import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { onAppStartCheckUpdate } from './src/updater/index';

export default function App() {
  const [status, setStatus] = useState<'checking' | 'up-to-date' | 'updating' | 'error'>('checking');
  const [message, setMessage] = useState('正在检查更新...');

  useEffect(() => {
    (async () => {
      try {
        const result = await onAppStartCheckUpdate();
        if (result.jsUpdate) {
          setStatus('updating');
          setMessage('发现 JS 更新，正在下载...（下次启动生效）');
        } else if (result.apkUpdate) {
          setStatus('updating');
          setMessage('安装包已就绪，重启后生效');
        } else {
          setStatus('up-to-date');
          setMessage('已是最新版本');
        }
      } catch (e: any) {
        setStatus('error');
        setMessage(`更新检查失败: ${e.message}`);
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <StatusBar style="light" />
      <Text style={styles.title}>Yuzu GCA</Text>
      <Text style={styles.subtitle}>Global Control Assistant</Text>
      <View style={styles.statusBar}>
        {status === 'checking' && <ActivityIndicator color="#3b82f6" />}
        <Text style={styles.statusText}>{message}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  title: {
    fontSize: 28,
    fontWeight: '800',
    color: '#e2e8f0',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#94a3b8',
    marginBottom: 32,
  },
  statusBar: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  statusText: {
    fontSize: 14,
    color: '#94a3b8',
  },
});