import { useRouter } from 'expo-router';
import { Text, TouchableOpacity, View } from 'react-native';

export default function HomeScreen() {
    const router = useRouter();

    return (
        <View className="flex-1 bg-bgPrimary px-[1rem] h-screen overflow-auto py-[2rem]">
            {/* 标题区域 */}
            <View className="items-start mb-10 w-full px-5">
                <Text className="text-white text-3xl font-bold mb-3 text-left">
                    Awaken{"\n"}your{"\n"}precious memories
                </Text>
                <Text className="text-white/85 text-base text-left">
                    let every moment speak and feel alive
                </Text>
            </View>

            {/* Memo 形象区域 */}
            <View className="items-center w-full relative">
                {/* 气泡对话框 */}
                <View className="absolute -top-[7rem] right-[1rem] z-10">
                    <View className="relative top-[12rem] -right-[3rem] z-10 w-3 h-3 bg-white rounded-full" />
                    <View className="relative top-[9.5rem] -right-[3.5rem] z-10 w-4 h-4 bg-white rounded-full" />
                    <Text className="text-[#AC7E35] font-bold text-lg text-center leading-6 relative top-[4rem] left-0">
                        Hi!{"\n"}I'm Memo
                    </Text>
                    <svg width="141" height="90" viewBox="0 0 141 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g filter="url(#filter0_d_27_1126)">
                            <path d="M78.0607 8.049C55.6607 -8.751 41.0607 8.38232 36.5607 19.049C11.0607 8.049 -6.43929 33.0493 11.0607 49.5491C-1.43929 61.5491 25.0607 81.0491 36.5607 65.0491C41.5607 91.5491 67.0607 84.5491 76.5607 68.5491C80.0607 81.5491 118.061 82.5491 118.061 62.0491C142.061 70.0491 143.561 22.0491 118.061 22.0491C121.561 -1.4509 93.0607 -1.95093 78.0607 8.049Z" fill="white" />
                        </g>
                        <defs>
                            <filter id="filter0_d_27_1126" x="0.3" y="0.3" width="140.028" height="89.1634" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                <feOffset dy="3" />
                                <feGaussianBlur stdDeviation="1.85" />
                                <feComposite in2="hardAlpha" operator="out" />
                                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
                                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_27_1126" />
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_27_1126" result="shape" />
                            </filter>
                        </defs>
                    </svg>
                </View>
                {/* Memo 形象 */}
                <View className="justify-center items-center">
                    <svg width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M149.63 74.6845C151.528 72.3111 156.769 77.2989 159.153 80.0896L150.38 80.8132C148.624 80.0432 147.733 77.0579 149.63 74.6845Z" fill="#FFDBA3" />
                        <path d="M150.882 75.6521C152.248 73.5515 155.431 77.4925 156.851 79.7257L152.509 79.9577C151.398 79.3978 149.516 77.7528 150.882 75.6521Z" fill="#AC7E35" />
                        <path d="M200.744 74.6845C198.846 72.3111 193.605 77.2989 191.221 80.0896L199.994 80.8132C201.75 80.0432 202.641 77.0579 200.744 74.6845Z" fill="#FFDBA3" />
                        <path d="M199.491 75.6521C198.125 73.5515 194.942 77.4925 193.522 79.7257L197.864 79.9577C198.975 79.3978 200.857 77.7528 199.491 75.6521Z" fill="#AC7E35" />
                        <ellipse cx="128.633" cy="258.761" rx="8.97436" ry="3.88889" fill="#AC7E35" />
                        <ellipse cx="225.555" cy="256.966" rx="8.97436" ry="3.88889" fill="#AC7E35" />
                        <path d="M109.197 113.974C138.443 63.319 211.557 63.3191 240.803 113.974L260.751 148.526C289.997 199.181 253.44 262.5 194.948 262.5H155.052C96.5601 262.5 60.0029 199.181 89.2487 148.526L109.197 113.974Z" fill="#FFD18A" />
                        <rect x="170.513" y="110.684" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 170.513 110.684)" fill="#4C320C" />
                        <rect x="181.282" y="110.684" width="2.99145" height="4.18803" rx="1.49573" transform="rotate(-180 181.282 110.684)" fill="#4C320C" />
                        <path d="M132.116 141.318C152.799 111.249 197.202 111.249 217.886 141.318L241.443 175.565C265.198 210.1 240.474 257.115 198.558 257.115H151.443C109.527 257.115 84.8027 210.1 108.559 175.565L132.116 141.318Z" fill="#FFF8DE" />
                        <g filter="url(#filter0_i_68_1022)">
                            <ellipse cx="216.581" cy="136.111" rx="49.0598" ry="35" fill="#FFF8DE" />
                        </g>
                        <g filter="url(#filter1_i_68_1022)">
                            <ellipse cx="133.12" cy="136.111" rx="48.7607" ry="35" fill="#FFF8DE" />
                        </g>
                        <ellipse cx="174.701" cy="118.761" rx="3.58974" ry="2.69231" transform="rotate(180 174.701 118.761)" fill="#FFB8B9" />
                        <ellipse cx="8.5474" cy="3.40976" rx="8.5474" ry="3.40976" transform="matrix(0.912659 0.408721 0.408721 -0.912659 189.5 177.335)" fill="#FFD38D" />
                        <ellipse cx="147.399" cy="177.717" rx="8.5474" ry="3.40976" transform="rotate(155.875 147.399 177.717)" fill="#FFD38D" />
                        <defs>
                            <filter id="filter0_i_68_1022" x="162.137" y="101.111" width="103.505" height="71.7949" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                <feOffset dx="-5.38462" dy="1.79487" />
                                <feGaussianBlur stdDeviation="4.9359" />
                                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                                <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0" />
                                <feBlend mode="normal" in2="shape" result="effect1_innerShadow_68_1022" />
                            </filter>
                            <filter id="filter1_i_68_1022" x="84.3594" y="101.111" width="103.504" height="70" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                <feOffset dx="5.98291" />
                                <feGaussianBlur stdDeviation="3.2906" />
                                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                                <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713974 0 0 0 0 0.272498 0 0 0 1 0" />
                                <feBlend mode="normal" in2="shape" result="effect1_innerShadow_68_1022" />
                            </filter>
                        </defs>
                    </svg>

                </View>
            </View>

            {/* 介绍文本 */}
            <Text className="text-white text-base text-center mb-[1rem] leading-6 opacity-90 px-10 -mt-[4rem]">
                I live deep inside your photo gallery, {"\n"}waiting for you to bring me back...
            </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={() => router.push('/login')}
                activeOpacity={0.8}
            >
                <Text className="text-[#4C320C] font-bold text-lg">
                    Awake your Memo
                </Text>
            </TouchableOpacity>
        </View>
    );
}