import { StyleSheet, TouchableOpacity } from 'react-native';

import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useTheme } from '@/context/ThemeContext';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function SettingsScreen() {
    const colorScheme = useColorScheme();
    const { themeMode, setThemeMode } = useTheme();
    const theme = colorScheme ?? 'light';

    const cardStyle = [
        styles.card,
        {
            shadowColor: Colors[theme].border,
            borderColor: Colors[theme].border
        }
    ];

    return (
        <ThemedView style={styles.container}>
            <ThemedView style={styles.header}>
                <ThemedText type="title">Settings</ThemedText>
                <ThemedText type="secondary">App preferences</ThemedText>
            </ThemedView>

            <ThemedView style={styles.sectionHeader}>
                <ThemedText type="subtitle">Appearance</ThemedText>
            </ThemedView>
            <ThemedView style={cardStyle} variant="card">
                <TouchableOpacity
                    style={styles.item}
                    onPress={() => setThemeMode('light')}
                >
                    <ThemedText>Light Mode</ThemedText>
                    {themeMode === 'light' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
                </TouchableOpacity>

                <TouchableOpacity
                    style={styles.item}
                    onPress={() => setThemeMode('dark')}
                >
                    <ThemedText>Dark Mode</ThemedText>
                    {themeMode === 'dark' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
                </TouchableOpacity>

                <TouchableOpacity
                    style={[styles.item, styles.lastItem]}
                    onPress={() => setThemeMode('system')}
                >
                    <ThemedText>System Default</ThemedText>
                    {themeMode === 'system' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
                </TouchableOpacity>
            </ThemedView>
        </ThemedView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        paddingTop: 80,
    },
    header: {
        marginBottom: 32,
    },
    sectionHeader: {
        marginBottom: 12,
        marginTop: 24,
    },
    card: {
        borderRadius: 16,
        borderWidth: 1,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.05,
        shadowRadius: 8,
        elevation: 2,
        overflow: 'hidden',
    },
    item: {
        padding: 16,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: 'rgba(0,0,0,0.05)',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    lastItem: {
        borderBottomWidth: 0,
    },
});