// LoginForm.js
import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Email</Text>
      <TextInput 
        value={email} 
        onChangeText={setEmail} 
        placeholder="Enter your email" 
        keyboardType="email-address" 
        autoCapitalize="none"
        style={styles.input} 
      />
      <Text style={styles.label}>Password</Text>
      <TextInput 
        value={password} 
        onChangeText={setPassword} 
        placeholder="Enter your password" 
        secureTextEntry 
        style={styles.input} 
      />
      <Button title="Login" onPress={() => console.log('Login attempt with:', email)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    marginTop: 12, 
    fontWeight: '500',
  },
  input: {
    borderBottomWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    marginBottom: 15,
  }
});

const fetchEmailSuggestion = async (nameHint) => {
  try {
    const response = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${YOUR_OPENAI_API_KEY}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        model: "gpt-4",
        messages: [
          { role: "system", content: "You are a helpful assistant that suggests professional email addresses based on names. Respond with just the email, no explanations." },
          { role: "user", content: `Suggest a professional email for someone named ${nameHint}` }
        ],
        max_tokens: 60
      })
    });
    const data = await response.json();
    return data.choices[0].message.content;
  } catch (error) {
    console.error("Error fetching email suggestion:", error);
    return null;
  }
};

<View style={styles.emailContainer}>
  <TextInput 
    value={email} 
    onChangeText={setEmail}
    placeholder="Enter your email"
    keyboardType="email-address"
    autoCapitalize="none"
    style={styles.input}
  />
  <Button 
    title="Suggest" 
    onPress={async () => {
      const name = "Alex Rivera"; // Ví dụ tên từ các bước trước
      const suggestion = await fetchEmailSuggestion(name);
      if (suggestion) {
        setEmail(suggestion.trim());
      }
    }} 
  />
</View>

npm install --save @react-native-voice/voice

import React, { useState, useEffect } from 'react';
import Voice from '@react-native-voice/voice';

export default function LoginForm() {
  // Các state hiện có...
  const [isListening, setIsListening] = useState(false);
  const [voiceInputField, setVoiceInputField] = useState(null); // 'email' hoặc 'password'

  useEffect(() => {
    Voice.onSpeechStart = () => setIsListening(true);
    Voice.onSpeechEnd = () => setIsListening(false);
    Voice.onSpeechResults = (e) => {
      if (e.value && e.value.length > 0) {
        if (voiceInputField === 'email') {
          setEmail(e.value[0].toLowerCase().replace(/\s+/g, ''));
        }
        // Có thể mở rộng cho password nếu muốn
      }
    };
    return () => {
      Voice.destroy().then(Voice.removeAllListeners);
    };
  }, [voiceInputField]);

  const startListening = (field) => {
    setVoiceInputField(field);
    Voice.start('en-US');
  };

  const stopListening = () => {
    Voice.stop();
    setIsListening(false);
  };

  // Phần giao diện kèm nút micro
  return (
    <View style={styles.inputGroup}>
      <TextInput 
        value={email} 
        onChangeText={setEmail} 
        placeholder="Enter your email" 
        keyboardType="email-address" 
        autoCapitalize="none" 
        style={[styles.input, styles.flexGrow]} 
      />
      <TouchableOpacity onPress={() => startListening('email')} style={styles.micButton}>
        <Text style={styles.micIcon}>{isListening && voiceInputField === 'email' ? '🔴' : '🎤'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const checkPasswordStrength = (password) => {
  if (!password) return { strength: 'empty', message: 'Enter a password' };
  if (password.length < 8)
    return { strength: 'weak', message: 'Too short! Use at least 8 characters' };
  if (/^123/.test(password) || /password/i.test(password)) {
    return { strength: 'weak', message: 'Avoid common patterns like "123" or "password"' };
  }
  const hasUppercase = /[A-Z]/.test(password);
  const hasLowercase = /[a-z]/.test(password);
  const hasNumbers = /[0-9]/.test(password);
  const hasSymbols = /[^A-Za-z0-9]/.test(password);
  const varietyScore = [hasUppercase, hasLowercase, hasNumbers, hasSymbols].filter(Boolean).length;
  if (varietyScore <= 2) {
    return {
      strength: 'medium',
      message: 'Mix uppercase, lowercase, numbers, and symbols for a stronger password',
    };
  }
  if (password.length >= 12 && varietyScore >= 3) {
    return { strength: 'strong', message: 'Great password! 💪' };
  }
  return { strength: 'medium', message: 'Decent, but could be stronger' };
};

const [passwordFeedback, setPasswordFeedback] = useState({
  strength: 'empty',
  message: 'Enter a password'
});

<TextInput 
  value={password} 
  onChangeText={(text) => {
    setPassword(text);
    setPasswordFeedback(checkPasswordStrength(text));
  }} 
  placeholder="Enter your password" 
  secureTextEntry 
  style={styles.input} 
/>
<Text style={[
  styles.feedbackText, 
  passwordFeedback.strength === 'weak' ? styles.weakText : 
  passwordFeedback.strength === 'medium' ? styles.mediumText : 
  passwordFeedback.strength === 'strong' ? styles.strongText : styles.neutralText
]}>
  {passwordFeedback.message}
</Text>

export default function LoginForm() {
  // Các state và hàm đã trình bày phía trên...

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome Back</Text>

      <Text style={styles.label}>Email</Text>
      <View style={styles.inputGroup}>
        <TextInput 
          value={email} 
          onChangeText={setEmail} 
          placeholder="Enter your email" 
          keyboardType="email-address" 
          autoCapitalize="none" 
          style={[styles.input, styles.flexGrow]} 
        />
        <TouchableOpacity onPress={() => startListening('email')} style={styles.micButton}>
          <Text style={styles.micIcon}>{isListening && voiceInputField === 'email' ? '🔴' : '🎤'}</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.suggestContainer}>
        <Button 
          title="Suggest Email" 
          onPress={async () => {
            const name = "Alex Rivera";
            const suggestion = await fetchEmailSuggestion(name);
            if (suggestion) setEmail(suggestion.trim());
          }} 
        />
      </View>

      <Text style={styles.label}>Password</Text>
      <TextInput 
        value={password} 
        onChangeText={(text) => {
          setPassword(text);
          setPasswordFeedback(checkPasswordStrength(text));
        }} 
        placeholder="Enter your password" 
        secureTextEntry 
        style={styles.input} 
      />
      <Text style={[
        styles.feedbackText, 
        passwordFeedback.strength === 'weak' ? styles.weakText : 
        passwordFeedback.strength === 'medium' ? styles.mediumText : 
        passwordFeedback.strength === 'strong' ? styles.strongText : styles.neutralText
      ]}>
        {passwordFeedback.message}
      </Text>

      <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
        <Text style={styles.loginButtonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
}