import React, { useState } from 'react';
import {
  View,
  Text,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './completeProfileScreen.styles';
import { CustomInput, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';

import { completeProfile } from '../../../store/commonreducers/auth';
import { AuthStackParamList } from '../../../navigation/authStack';
import { useAppDispatch } from '@store';

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

const LOCATION_LABELS = ['Home', 'Work', 'Other'];

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

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [selectedLabel, setSelectedLabel] = useState('Home');

  const handleSave = () => {
    dispatch(completeProfile({ name, email, locationLabels: [selectedLabel] }));
    navigation.navigate('PreferencesScreen');
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        <Text style={styles.title}>Complete Profile</Text>
        <Text style={styles.subtitle}>Tell us about yourself</Text>

        <View style={styles.form}>
          <CustomInput
            label="Name"
            placeholder="John Doe"
            value={name}
            onChangeText={setName}
          />
          <CustomInput
            label="Email"
            placeholder="john@example.com"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
          />

          <Text style={styles.labelText}>Location Label</Text>
          <View style={styles.labelRow}>
            {LOCATION_LABELS.map(label => (
              <TouchableOpacity
                key={label}
                style={[
                  styles.labelChip,
                  selectedLabel === label && styles.labelChipSelected,
                ]}
                onPress={() => setSelectedLabel(label)}
                activeOpacity={0.7}
              >
                <Text
                  style={[
                    styles.labelChipText,
                    selectedLabel === label && styles.labelChipTextSelected,
                  ]}
                >
                  {label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        <PrimaryButton
          title="Save & Continue"
          onPress={handleSave}
          disabled={!name || !email}
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );
};