import { Steps } from '@/app/(tabs)/user-message';
import ChoiceSvg from '@/assets/icons/svg/choice.svg';
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]">
                    <ChoiceSvg />
                    <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>
    );
}
