memowake-front/components/file-upload/autoUploadScreen.tsx

import { registerBackgroundUploadTask } from '@/lib/background-uploader/automatic';
import { triggerManualUpload } from '@/lib/background-uploader/manual';
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function AutoUploadScreen() {
    const [timeRange, setTimeRange] = useState('day');
    const [isLoading, setIsLoading] = useState(false);
    const [isRegistered, setIsRegistered] = useState(false);

    // 注册后台任务
    useEffect(() => {
        const registerTask = async () => {
            const registered = await registerBackgroundUploadTask();
            setIsRegistered(registered);
        };
        console.log("register background upload task");
        registerTask();
    }, []);

    // 处理手动上传
    const handleManualUpload = async () => {
        try {
            setIsLoading(true);
            await triggerManualUpload(getDateRange(timeRange)[0], getDateRange(timeRange)[1]);
        } catch (error) {
            console.error('Upload error:', error);
        } finally {
            setIsLoading(false);
        }
    };

    // 获取时间范围文本
    const getDateRangeText = (timeRange: string) => {
        switch (timeRange) {
            case 'day':
                return '最近一天';
            case 'week':
                return '最近一周';
            case 'month':
                return '最近一个月';
            case 'all':
                return '全部';
            default:
                return '';
        }
    };

    // 获取时间范围
    const getDateRange = (timeRange: string) => {
        const date = new Date();
        switch (timeRange) {
            case 'day':
                date.setDate(date.getDate() - 1);
                break;
            case 'week':
                date.setDate(date.getDate() - 7);
                break;
            case 'month':
                date.setMonth(date.getMonth() - 1);
                break;
            case 'all':
                date.setFullYear(date.getFullYear() - 1);
                break;
            default:
                break;
        }
        return [date, new Date()];
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>自动上传设置</Text>

            <View style={styles.buttonGroup}>
                <Text style={styles.sectionTitle}>选择时间范围:</Text>
                <View style={styles.buttonRow}>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'day' && styles.activeButton]}
                        onPress={() => setTimeRange('day')}
                    >
                        <Text style={styles.buttonText}>一天</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'week' && styles.activeButton]}
                        onPress={() => setTimeRange('week')}
                    >
                        <Text style={styles.buttonText}>一周</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'month' && styles.activeButton]}
                        onPress={() => setTimeRange('month')}
                    >
                        <Text style={styles.buttonText}>一个月</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'all' && styles.activeButton]}
                        onPress={() => setTimeRange('all')}
                    >
                        <Text style={styles.buttonText}>全部</Text>
                    </TouchableOpacity>
                </View>
                <Text style={styles.dateRangeText}>
                    {getDateRangeText(timeRange)}
                </Text>
            </View>

            <View style={styles.uploadButtonContainer}>
                <TouchableOpacity
                    style={[styles.uploadButton, isLoading && styles.uploadButtonDisabled]}
                    onPress={handleManualUpload}
                    disabled={isLoading}
                >
                    <Text style={styles.uploadButtonText}>
                        {isLoading ? '上传中...' : '开始上传'}
                    </Text>
                </TouchableOpacity>
            </View>

            <View style={styles.statusContainer}>
                <Text style={styles.statusText}>
                    后台自动上传状态: {isRegistered ? '已启用' : '未启用'}
                </Text>
                <Text style={styles.hintText}>
                    系统会自动在后台上传过去24小时内的新照片和视频
                </Text>
            </View>

            {isLoading && (
                <View style={styles.loadingContainer}>
                    <ActivityIndicator size="large" color="#0000ff" />
                    <Text style={styles.loadingText}>正在上传，请稍候...</Text>
                </View>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 20,
        textAlign: 'center',
    },
    buttonGroup: {
        marginBottom: 20,
    },
    sectionTitle: {
        fontSize: 16,
        marginBottom: 10,
        color: '#333',
    },
    buttonRow: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 10,
        gap: 10,
    },
    timeButton: {
        paddingVertical: 8,
        paddingHorizontal: 15,
        borderRadius: 20,
        backgroundColor: '#f0f0f0',
        borderWidth: 1,
        borderColor: '#ddd',
    },
    activeButton: {
        backgroundColor: '#007AFF',
        borderColor: '#007AFF',
    },
    buttonText: {
        color: '#333',
        textAlign: 'center',
    },
    dateRangeText: {
        fontSize: 14,
        color: '#666',
        marginTop: 8,
    },
    uploadButtonContainer: {
        marginTop: 20,
    },
    uploadButton: {
        backgroundColor: '#007AFF',
        padding: 15,
        borderRadius: 8,
        alignItems: 'center',
    },
    uploadButtonDisabled: {
        backgroundColor: '#84c1ff',
    },
    uploadButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
    },
    statusContainer: {
        marginTop: 30,
        padding: 15,
        backgroundColor: '#f8f8f8',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#eee',
    },
    statusText: {
        fontSize: 15,
        marginBottom: 5,
        color: '#333',
    },
    hintText: {
        fontSize: 13,
        color: '#666',
    },
    loadingContainer: {
        marginTop: 20,
        alignItems: 'center',
    },
    loadingText: {
        marginTop: 10,
        color: '#666',
    },
});