import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Switch,
  ScrollView,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './preferencesScreen.styles';
import { PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { AuthStackParamList } from '../../../navigation/authStack';

type NavProp = StackNavigationProp<AuthStackParamList, 'PreferencesScreen'>;

const CATEGORIES = [
  { key: 'food', icon: '🍔', label: 'Food' },
  { key: 'groceries', icon: '🛒', label: 'Groceries' },
  { key: 'pharmacy', icon: '💊', label: 'Pharmacy' },
  { key: 'others', icon: '📦', label: 'Others' },
];

export const PreferencesScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<NavProp>();

  const [selectedCategories, setSelectedCategories] = useState<string[]>(['food']);
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);

  const toggleCategory = (key: string) => {
    setSelectedCategories((prev) =>
      prev.includes(key)
        ? prev.filter((c) => c !== key)
        : [...prev, key],
    );
  };

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <Text style={styles.title}>Preferences</Text>
      <Text style={styles.subtitle}>Select your interests</Text>

      <View style={styles.grid}>
        {CATEGORIES.map((cat) => (
          <TouchableOpacity
            key={cat.key}
            style={[
              styles.gridItem,
              selectedCategories.includes(cat.key) && styles.gridItemSelected,
            ]}
            onPress={() => toggleCategory(cat.key)}
            activeOpacity={0.7}
          >
            <Text style={styles.gridIcon}>{cat.icon}</Text>
            <Text
              style={[
                styles.gridLabel,
                selectedCategories.includes(cat.key) && styles.gridLabelSelected,
              ]}
            >
              {cat.label}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      <View style={styles.toggleRow}>
        <View>
          <Text style={styles.toggleLabel}>Enable Notifications</Text>
          <Text style={styles.toggleSubtext}>Get order updates and offers</Text>
        </View>
        <Switch
          value={notificationsEnabled}
          onValueChange={setNotificationsEnabled}
          trackColor={{ false: colors.border, true: colors.primary }}
          thumbColor={colors.white}
        />
      </View>

      <PrimaryButton
        title="Continue"
        onPress={() => navigation.navigate('OnboardingCompleteScreen')}
        style={{ marginTop: 32 }}
      />
    </ScrollView>
  );
};