import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Image, KeyboardAvoidingView, Platform, Alert, useColorScheme, ScrollView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { authService } from '../services/api';
import { getThemeStyles, commonStyles } from '../theme/styles';

export default function ForgotPasswordScreen() {
  const navigation = useNavigation();
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  const themeStyles = getThemeStyles(isDark);

  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);

  const handleReset = async () => {
    if (!email) {
      Alert.alert('Error', 'Please enter your email');
      return;
    }

    setLoading(true);
    try {
      const { ok, message } = await authService.sendPasswordResetEmail(email);

      if (ok) {
        Alert.alert(
          'Check your email',
          'We have sent you a password reset link.',
          [{ text: 'OK', onPress: () => navigation.goBack() }]
        );
      } else {
        Alert.alert('Error', message || 'Could not send reset link');
      }
    } catch (error) {
      console.error(error);
      Alert.alert('Network Error', 'Could not connect to server.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={themeStyles.container}
    >
      <ScrollView contentContainerStyle={commonStyles.scrollContent}>
        <View style={commonStyles.logoContainer}>
          <Image 
            source={isDark ? require('../../assets/icons/ios-dark.png') : require('../../assets/icons/ios-light.png')}
            style={commonStyles.logo}
            resizeMode="contain"
          />
        </View>
        <Text style={themeStyles.headerTitle}>CasaDoc</Text>
        <Text style={[commonStyles.subtitle, themeStyles.subtitle]}>
          Reset Password
        </Text>
        
        <View style={[commonStyles.form, themeStyles.card]}>
          <Text style={[commonStyles.label, themeStyles.subtitle]}>Email Address</Text>
          <TextInput
            style={[themeStyles.input]}
            placeholder="name@example.com"
            placeholderTextColor={isDark ? '#a0aec0' : '#a0aec0'}
            value={email}
            onChangeText={setEmail}
            autoCapitalize="none"
            keyboardType="email-address"
            autoCorrect={false}
          />

          <TouchableOpacity 
            style={[themeStyles.button, loading && commonStyles.buttonDisabled]} 
            onPress={handleReset}
            disabled={loading}
          >
            {loading ? (
              <ActivityIndicator color="white" />
            ) : (
              <Text style={themeStyles.buttonText}>Send Reset Link</Text>
            )}
          </TouchableOpacity>

          <TouchableOpacity onPress={() => navigation.goBack()} style={{ marginTop: 20, alignItems: 'center' }}>
            <Text style={themeStyles.linkText}>
              Back to Login
            </Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}
