import IP from '@/assets/icons/svg/ip.svg';
import { checkAuthStatus } from '@/lib/auth';
import { useRouter } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function HomeScreen() {
    const router = useRouter();
    const { t } = useTranslation();
    const insets = useSafeAreaInsets();
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        setIsLoading(true);
        checkAuthStatus(router, () => {
            router.replace('/ask')
        }, false).then(() => {
            setIsLoading(false);
        });
    }, []);

    if (isLoading) {
        return (
            <View className="flex-1 bg-bgPrimary justify-center items-center">
                <Text className="text-white">加载中...</Text>
            </View>
        );
    }

    return (
        <View className="flex-1">
            <View className="flex-1 bg-bgPrimary px-[1rem] h-screen overflow-auto py-[2rem] " style={{ paddingTop: insets.top + 48 }}>
                {/* 标题区域 */}
                <View className="mb-10 w-full px-5">
                    <Text className="text-white text-3xl font-bold mb-3 text-left">
                        {t('auth.welcomeAwaken.awaken', { ns: 'login' })}
                        {"\n"}
                        {t('auth.welcomeAwaken.your', { ns: 'login' })}
                        {"\n"}
                        {t('auth.welcomeAwaken.pm', { ns: 'login' })}
                    </Text>
                    <Text className="text-white/85 text-base text-left">
                        {t('auth.welcomeAwaken.slogan', { ns: 'login' })}
                    </Text>
                </View>

                {/* Memo 形象区域 */}
                <View className="items-center">
                    <IP />
                </View>

                {/* 介绍文本 */}
                <Text className="text-white text-base text-center mb-[1rem] leading-6 opacity-90 px-10 -mt-[4rem]">
                    {t('auth.welcomeAwaken.gallery', { ns: 'login' })}
                    {"\n"}
                    {t('auth.welcomeAwaken.back', { ns: 'login' })}
                </Text>

                {/* 唤醒按钮 */}
                <TouchableOpacity
                    className="bg-white rounded-full px-10 py-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)] w-full items-center"
                    onPress={async () => {
                        router.push('/login')
                    }}
                    activeOpacity={0.8}
                >
                    <Text className="text-[#4C320C] font-bold text-lg">
                        {t('auth.welcomeAwaken.awake', { ns: 'login' })}
                    </Text>
                </TouchableOpacity>
            </View>
        </View >
    );
}