Support Chat

<TouchableOpacity 
  style={styles.faqCard} 
  onPress={() => initiateChat("Hola, necesito ayuda para recuperar mi contraseña.")}
>
  <View style={styles.iconCircle}>
    <Ionicons name="lock-open" size={22} color="#FBC02D" />
  </View>
  <View style={styles.faqTextContainer}>
    <Text style={styles.faqTitle}>Recuperar Cuenta</Text>
    <Text style={styles.faqSub}>Olvidé mi contraseña</Text>
  </View>
</TouchableOpacity>

const initiateChat = async (initialMessage: string | null = null) => {
  const newSessionId = Date.now().toString();
  const chatRef = doc(db, 'support_chats', user.uid);

  await setDoc(chatRef, {
    status: 'open',
    activeSessionId: newSessionId,
    adminUnreadCount: 1,
    lastUpdated: serverTimestamp(),
    lastMessage: initialMessage || 'El usuario solicitó asistencia.',
    adminIsTyping: false
  });

  if (initialMessage) {
    await addDoc(collection(db, 'support_chats', user.uid, 'messages'), {
      text: initialMessage,
      senderRole: 'client',
      sessionId: newSessionId,
      createdAt: serverTimestamp()
    });
    
    handleAiResponse(initialMessage, newSessionId, user.uid);
  }
};

<View style={styles.headerCenter}>
  <Text style={styles.headerTitle}>Soporte ParkInMX</Text>
  {chatStatus === 'open' ? (
    <View style={styles.statusBadge}>
      <View style={styles.statusDot} />
      <Text style={styles.statusText}>En línea</Text>
    </View>
  ) : (
    <Text style={styles.statusTextOffline}>Asistente Virtual</Text>
  )}
</View>

{isAiThinking && (
  <View style={styles.typingContainer}>
    <Animated.View style={[styles.typingDot, dotStyle(dot1)]} />
    <Animated.View style={[styles.typingDot, dotStyle(dot2)]} />
    <Animated.View style={[styles.typingDot, dotStyle(dot3)]} />
  </View>
)}

const GEMINI_API_KEY = "AIzaSyDQagpCrH-AqLRUXp9uLr-LSpJPM-3Fnpo";
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent?key=${GEMINI_API_KEY}`;

const handleAiResponse = async (userMsg: string, sessionId: string, uid: string) => {
  setIsAiThinking(true);
  
  const fullPrompt = `${PARKIN_BOT_SYSTEM_PROMPT}\n\nPregunta del usuario: "${userMsg}"\n\nRespuesta de ParkBot:`;

  const response = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      contents: [{ parts: [{ text: fullPrompt }] }]
    }),
  });

  const data = await response.json();
  const aiResponseText = data.candidates?.[0]?.content?.parts?.[0]?.text;
  
  // Save AI response to chat
  await addDoc(collection(db, 'support_chats', uid, 'messages'), {
    text: aiResponseText.trim(),
    senderRole: 'admin',
    isAi: true,
    sessionId: sessionId,
    createdAt: serverTimestamp()
  });
  
  setIsAiThinking(false);
};

const adminMessages = messages.filter(m => m.senderRole === 'admin');
const lastAdminMessage = adminMessages[adminMessages.length - 1];

// Human is in control if last admin message has no 'isAi' flag
const isHumanInControl = lastAdminMessage && !lastAdminMessage.isAi;

if (!isAdminTyping && !isHumanInControl) {
  // AI can respond
  handleAiResponse(msgToSend, currentSessionId, user.uid);
} else {
  // Human is handling, AI stays quiet
  console.log("🤫 Shhh... ParkBot guarda silencio porque el humano está a cargo.");
}

<TextInput
  style={styles.input}
  placeholder="Escribe aquí..."
  placeholderTextColor="#B0B0B0"
  value={inputText}
  onChangeText={setInputText}
  multiline
  maxLength={1000}
/>

useEffect(() => {
  if (!user || chatStatus !== 'open' || !currentSessionId) return;
  
  const q = query(
    collection(db, 'support_chats', user.uid, 'messages'),
    where('sessionId', '==', currentSessionId),
    orderBy('createdAt', 'asc')
  );
  
  const unsubscribe = onSnapshot(q, (snapshot) => {
    const msgs = snapshot.docs.map(doc => ({ 
      id: doc.id, 
      ...doc.data() 
    }));
    setMessages(msgs);
  });
  
  return () => unsubscribe();
}, [user, chatStatus, currentSessionId]);

ListEmptyComponent={
  <View style={styles.emptyChatState}>
    <Text style={styles.emptyChatText}>🔒 Chat Seguro con IA</Text>
    <Text style={styles.emptyChatSub}>ParkBot está listo para ayudarte.</Text>
  </View>
}

useEffect(() => {
  if (messages.length > 0 || isAdminTyping || isAiThinking) {
    setTimeout(() => {
      flatListRef.current?.scrollToEnd({ animated: true });
    }, 200);
  }
}, [messages, isAdminTyping, isAiThinking]);