import DoneSvg from '@/assets/icons/svg/done.svg';
import { router } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { Platform, TouchableOpacity, View } from 'react-native';
import { ThemedText } from '../ThemedText';
import { Fireworks } from '../firework';
import Lottie from '../lottie/lottie';

export default function Done() {
    const { t } = useTranslation();
    const handleContinue = () => {
        router.replace('/ask')
    };
    return (
        <View className="flex-1">
            {
                Platform.OS === 'web'
                    ?
                    <View className="flex-1 bg-bgPrimary absolute top-0 left-0 right-0 bottom-0 h-full">
                        <View className="absolute top-[2rem] left-0 right-0 bottom-[10rem] justify-center items-center">
                            <ThemedText className="!text-4xl !text-white text-center">
                                {t('auth.userMessage.allDone', { ns: 'login' })}
                            </ThemedText>
                        </View>
                        <View className='flex-1' />
                        <View className="flex-row justify-end">
                            <DoneSvg />
                        </View>
                        {/* Next Button */}
                        <View className="absolute bottom-[1rem] left-0 right-0 p-[1rem] z-99">
                            <TouchableOpacity
                                className={`w-full bg-buttonFill rounded-full p-4 items-center`}
                                onPress={handleContinue}
                            >
                                <ThemedText className="!text-white text-lg font-semibold">
                                    {t('auth.userMessage.next', { ns: 'login' })}
                                </ThemedText>
                            </TouchableOpacity>
                        </View>
                    </View>
                    :
                    <View className="flex-1 bg-transparent">
                        {/* 文字 */}
                        <View className="absolute top-0 left-0 right-0 bottom-0 z-30">
                            <View className="flex-1 justify-center items-center">
                                <ThemedText className="!text-4xl !text-white text-center">
                                    {t('auth.userMessage.allDone', { ns: 'login' })}
                                </ThemedText>
                            </View>
                            {/* Next Button */}
                            <View className="absolute bottom-[1rem] left-0 right-0 p-[1rem] z-99">
                                <TouchableOpacity
                                    className={`w-full bg-buttonFill rounded-full p-4 items-center`}
                                    onPress={handleContinue}
                                >
                                    <ThemedText className="!text-white text-lg font-semibold">
                                        {t('auth.userMessage.next', { ns: 'login' })}
                                    </ThemedText>
                                </TouchableOpacity>
                            </View>
                        </View>
                        {/* 背景动画 - 烟花 */}
                        <View className="absolute top-0 left-0 right-0 bottom-0 z-10">
                            <Fireworks
                                autoPlay={true}
                                loop={false}
                                interval={1500}
                                particleCount={90}
                            />
                        </View>

                        {/* 前景动画 - Lottie */}
                        <View className="absolute top-0 left-0 right-0 bottom-0 z-20">
                            <Lottie
                                source={'allDone'}
                                style={{
                                    width: "100%",
                                    height: "100%",
                                    backgroundColor: 'transparent'
                                }}
                                loop={false}
                            />
                        </View>
                    </View>
            }

        </View>
    )
}