import { useColorScheme } from '@/hooks/useColorScheme';
import { useThemeColor } from '@/hooks/useThemeColor';
import { useAppStore } from '@/store/useAppStore';
import { isDarkTheme } from '@/utils/theme';
import { Moon } from 'lucide-react-native';
import React from 'react';
import { StyleSheet, Switch, Text, View } from 'react-native';
import { SettingsSection } from './SettingsSection';

export function AppearanceCard() {
    const colors = useThemeColor();
    const systemScheme = useColorScheme();
    const themePreference = useAppStore(state => state.theme);
    const setTheme = useAppStore(state => state.setTheme);

    const isDarkMode = isDarkTheme(themePreference, systemScheme);
    const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');

    return (
        <SettingsSection title="APPEARANCE">
            <View style={styles.row}>
                <View style={styles.rowIconWrap}>
                    <Moon size={20} color={colors.text} />
                </View>
                <View style={styles.rowText}>
                    <Text style={[styles.rowTitle, { color: colors.text }]}>Dark Mode</Text>
                    <Text style={[styles.rowSubtitle, { color: colors.textMuted }]}>Toggle sleek dark theme</Text>
                </View>
                <Switch
                    value={isDarkMode}
                    onValueChange={toggleTheme}
                    accessibilityLabel="Dark Mode"
                    trackColor={{ false: '#E2E8F0', true: colors.tint }}
                    thumbColor={'#FFFFFF'}
                />
            </View>
        </SettingsSection>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 4,
    },
    rowIconWrap: {
        marginRight: 12,
    },
    rowText: {
        flex: 1,
    },
    rowTitle: {
        fontSize: 16,
        fontWeight: '600',
        marginBottom: 4,
    },
    rowSubtitle: {
        fontSize: 14,
    },
});