import { Steps } from '@/app/(tabs)/user-message';
import { ThemedText } from '@/components/ThemedText';
import { useState } from 'react';
import { TouchableOpacity, View } from 'react-native';

interface Props {
    setSteps: (steps: Steps) => void;
}

type ChoiceOption = {
    id: string;
    emoji: string;
    label: string;
    description: string;
};

export default function Choice({ setSteps }: Props) {
    const [selectedOption, setSelectedOption] = useState<string[]>([]);
    const [isLoading, setIsLoading] = useState(false);

    const handleContinue = () => {
        if (!selectedOption) return;
        setIsLoading(true);
        // Simulate API call
        setTimeout(() => {
            setIsLoading(false);
            setSteps('done');
        }, 500);
    };

    const options: ChoiceOption[] = [
        {
            id: 'wakeup',
            emoji: '⏰',
            label: 'Wake Up',
            description: 'Start your day right with a gentle wake-up'
        },
        {
            id: 'sleep',
            emoji: '😴',
            label: 'Sleep',
            description: 'Drift off with calming sounds'
        },
        {
            id: 'focus',
            emoji: '🎯',
            label: 'Focus',
            description: 'Enhance your concentration'
        },
        {
            id: 'relax',
            emoji: '🧘',
            label: 'Relax',
            description: 'Unwind and de-stress'
        },
        {
            id: 'relax1',
            emoji: '🧘',
            label: 'Relax1',
            description: 'Unwind and de-stress'
        },
        {
            id: 'relax11',
            emoji: '🧘',
            label: 'Relax11',
            description: 'Unwind and de-stress'
        },
    ];

    return (
        <View className="h-full bg-textPrimary overflow-y-auto">
            {/* Fixed Header */}
            <View className="p-[2rem] pb-0">
                <View className="items-center flex flex-col gap-[2rem]">
                    <svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="46" cy="46" r="40" fill="white" stroke="#FFB645" stroke-width="11" />
                        <mask id="mask0_33_184" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="6" y="6" width="80" height="80">
                            <circle cx="46" cy="46" r="40" fill="white" />
                        </mask>
                        <g mask="url(#mask0_33_184)">
                            <path d="M-10.4027 27.6923C14.6652 -15.7265 77.3348 -15.7265 102.403 27.6923L119.501 57.3077C144.569 100.727 113.234 155 63.0984 155H28.9016C-21.2342 155 -52.569 100.726 -27.5011 57.3077L-10.4027 27.6923Z" fill="#FFD18A" />
                            <rect x="42.1543" y="24.8718" width="2.5641" height="3.58974" rx="1.28205" transform="rotate(-180 42.1543 24.8718)" fill="#4C320C" />
                            <rect x="51.3848" y="24.8718" width="2.5641" height="3.58974" rx="1.28205" transform="rotate(-180 51.3848 24.8718)" fill="#4C320C" />
                            <path d="M9.24226 51.13C26.9712 25.3565 65.0303 25.3565 82.7593 51.13L102.951 80.4839C123.313 110.085 102.121 150.385 66.1926 150.385H25.8088C-10.1197 150.385 -31.3117 110.085 -10.9496 80.4839L9.24226 51.13Z" fill="#FFF8DE" />
                            <g filter="url(#filter0_i_33_184)">
                                <ellipse cx="81.6411" cy="46.6667" rx="42.0513" ry="30" fill="#FFF8DE" />
                            </g>
                            <g filter="url(#filter1_i_33_184)">
                                <ellipse cx="10.1025" cy="46.6667" rx="41.7949" ry="30" fill="#FFF8DE" />
                            </g>
                            <ellipse cx="45.7434" cy="31.795" rx="3.07692" ry="2.30769" transform="rotate(180 45.7434 31.795)" fill="#FFB8B9" />
                            <ellipse cx="7.32634" cy="2.92265" rx="7.32634" ry="2.92265" transform="matrix(0.912659 0.408721 0.408721 -0.912659 61.4287 82.0015)" fill="#FFD38D" />
                            <ellipse cx="22.3426" cy="82.3285" rx="7.32634" ry="2.92265" transform="rotate(155.875 22.3426 82.3285)" fill="#FFD38D" />
                            <path d="M45.2994 34.359C45.4968 34.0171 45.9903 34.0171 46.1877 34.359L46.6318 35.1282C46.8292 35.4701 46.5824 35.8975 46.1877 35.8975H45.2994C44.9047 35.8975 44.6579 35.4701 44.8553 35.1282L45.2994 34.359Z" fill="#4C320C" />
                        </g>
                        <defs>
                            <filter id="filter0_i_33_184" x="34.9745" y="16.6667" width="88.7179" height="61.5385" 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="-4.61538" dy="1.53846" />
                                <feGaussianBlur stdDeviation="4.23077" />
                                <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_33_184" />
                            </filter>
                            <filter id="filter1_i_33_184" x="-31.6924" y="16.6667" width="88.718" height="60" 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.1282" />
                                <feGaussianBlur stdDeviation="2.82051" />
                                <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_33_184" />
                            </filter>
                        </defs>
                    </svg>
                    <ThemedText className="text-3xl !text-white text-center font-semibold">
                        Every memory matters.
                    </ThemedText>
                    <ThemedText className="text-base !text-white text-center">
                        Select a few to help Memo create better video capsules for you
                    </ThemedText>
                </View>
            </View>

            {/* Scrollable Content */}
            <View className="flex-1">
                <View className="p-[2rem] pb-0">
                    <View className="gap-4">
                        {options.map((option) => (
                            <TouchableOpacity
                                key={option.id}
                                className={`p-[1rem] rounded-full bg-[#FFF8DE] border-2 ${selectedOption.includes(option.id) ? 'border-bgPrimary' : 'border-transparent'} w-full flex items-center justify-center`}
                                onPress={() => {
                                    // 如果存在则删除，没有则添加，多选
                                    if (selectedOption.includes(option.id)) {
                                        // 剔除
                                        setSelectedOption((prev) => prev.filter((id) => id !== option.id));
                                    } else {
                                        // 添加
                                        setSelectedOption((prev) => ([...prev, option.id]));
                                    }
                                }}
                            >
                                <ThemedText className="text-lg font-semibold !text-textTertiary text-center">
                                    {option.label}
                                </ThemedText>
                            </TouchableOpacity>
                        ))}

                        {/* Next Button */}
                        <View className="mt-8 mb-4">
                            <TouchableOpacity
                                className={`w-full bg-white rounded-full p-4 items-center ${isLoading ? 'opacity-70' : ''}`}
                                onPress={handleContinue}
                                disabled={isLoading}
                            >
                                <ThemedText className="text-textTertiary text-lg font-semibold">
                                    Next
                                </ThemedText>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    );
}