/**
 * Unified Chat Screen - Text Chat + Ultravox Voice AI
 *
 * Features:
 * - Text messaging with AI (keyboard input)
 * - High-quality Ultravox voice calls (WebRTC)
 * - Chat history with transcripts from voice calls
 * - Seamless switching between text and voice
 */

import React, { useState, useCallback, useRef, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  Modal,
  ActivityIndicator,
  Keyboard,
  Animated,
  Easing,
  ScrollView,
  Share,
} from 'react-native';
import * as Clipboard from 'expo-clipboard';
import { Ionicons, Feather } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import * as SecureStore from 'expo-secure-store';
import { useRouter } from 'expo-router';
import { useFocusEffect } from '@react-navigation/native';
import {
  useUltravox,
  UltravoxSessionStatus,
} from 'ultravox-react-native';
import { AudioSession } from '@livekit/react-native';
import { api } from '@/services/api';
import { useBeneficiary } from '@/contexts/BeneficiaryContext';
import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
import type { Message, Beneficiary } from '@/types';
import {
  createCall,
  getSystemPrompt,
  VOICE_NAME,
} from '@/services/ultravoxService';

const API_URL = 'https://eluxnetworks.net/function/well-api/api';

type VoiceCallState = 'idle' | 'connecting' | 'active' | 'ending';

// Log entry type
interface LogEntry {
  time: string;
  type: 'info' | 'error' | 'status' | 'api';
  message: string;
}

export default function ChatScreen() {
  const router = useRouter();
  const { currentBeneficiary, setCurrentBeneficiary } = useBeneficiary();

  // Chat state
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      role: 'assistant',
      content: 'Hello! I\'m Julia, your AI wellness assistant. You can type a message or tap the phone button to start a voice call.',
      timestamp: new Date(),
    },
  ]);
  const [input, setInput] = useState('');
  const [isSending, setIsSending] = useState(false);
  const flatListRef = useRef<FlatList>(null);

  // Voice call state (Ultravox)
  const [voiceCallState, setVoiceCallState] = useState<VoiceCallState>('idle');
  const voiceCallStateRef = useRef<VoiceCallState>('idle'); // Ref to avoid useFocusEffect deps
  const [isMuted, setIsMuted] = useState(false);

  // Debug logs state
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [showLogs, setShowLogs] = useState(true);
  const logsScrollRef = useRef<ScrollView>(null);

  // Add log helper
  const addLog = useCallback((type: LogEntry['type'], message: string) => {
    const time = new Date().toLocaleTimeString('en-US', { hour12: false });
    setLogs(prev => [...prev.slice(-50), { time, type, message }]); // Keep last 50 logs
    console.log(`[Chat ${type}] ${message}`);
  }, []);

  // Copy logs to clipboard
  const copyLogs = useCallback(async () => {
    const logsText = logs.map(l => `[${l.time}] [${l.type.toUpperCase()}] ${l.message}`).join('\n');
    await Clipboard.setStringAsync(logsText);
    addLog('info', 'Logs copied to clipboard!');
  }, [logs, addLog]);

  // Share logs
  const shareLogs = useCallback(async () => {
    const logsText = logs.map(l => `[${l.time}] [${l.type.toUpperCase()}] ${l.message}`).join('\n');
    try {
      await Share.share({ message: logsText, title: 'WellNuo Voice Logs' });
    } catch (err) {
      addLog('error', `Share failed: ${err}`);
    }
  }, [logs, addLog]);

  // Clear logs
  const clearLogs = useCallback(() => {
    setLogs([]);
    addLog('info', 'Logs cleared');
  }, [addLog]);

  // Animations
  const pulseAnim = useRef(new Animated.Value(1)).current;
  const rotateAnim = useRef(new Animated.Value(0)).current;

  // Beneficiary picker
  const [showBeneficiaryPicker, setShowBeneficiaryPicker] = useState(false);
  const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
  const [loadingBeneficiaries, setLoadingBeneficiaries] = useState(false);

  // Tool implementations for Ultravox navigation
  const toolImplementations = {
    navigateToDashboard: () => {
      console.log('[Chat] Tool: navigateToDashboard');
      router.push('/(tabs)/dashboard');
      return 'Navigating to Dashboard';
    },
    navigateToBeneficiaries: () => {
      console.log('[Chat] Tool: navigateToBeneficiaries');
      router.push('/(tabs)/beneficiaries');
      return 'Navigating to Beneficiaries';
    },
    navigateToProfile: () => {
      console.log('[Chat] Tool: navigateToProfile');
      router.push('/(tabs)/profile');
      return 'Navigating to Profile';
    },
  };

  // Ultravox hook for voice calls
  const { transcripts, joinCall, leaveCall, session } = useUltravox({
    tools: toolImplementations,
    onStatusChange: (event) => {
      addLog('status', `Ultravox status: ${event.status}`);

      switch (event.status) {
        case UltravoxSessionStatus.IDLE:
        case UltravoxSessionStatus.DISCONNECTED:
          setVoiceCallState('idle');
          break;
        case UltravoxSessionStatus.CONNECTING:
          setVoiceCallState('connecting');
          break;
        case UltravoxSessionStatus.LISTENING:
          addLog('info', '🎤 LISTENING - microphone should be active');
          setVoiceCallState('active');
          break;
        case UltravoxSessionStatus.THINKING:
          addLog('info', '🤔 THINKING - processing audio');
          setVoiceCallState('active');
          break;
        case UltravoxSessionStatus.SPEAKING:
          addLog('info', '🔊 SPEAKING - audio output should play');
          setVoiceCallState('active');
          break;
        case UltravoxSessionStatus.DISCONNECTING:
          setVoiceCallState('ending');
          break;
      }
    },
  });

  // Log on mount
  useEffect(() => {
    addLog('info', 'Chat screen mounted');
    addLog('info', `Beneficiary: ${currentBeneficiary?.name || 'none'}`);
  }, []);

  // Track current streaming message ID for each speaker
  const streamingMessageIdRef = useRef<{ agent: string | null; user: string | null }>({
    agent: null,
    user: null,
  });
  const lastTranscriptIndexRef = useRef<number>(-1);

  // Add voice transcripts to chat history - update existing message until final
  useEffect(() => {
    if (transcripts.length === 0) return;

    // Process only new transcripts
    for (let i = lastTranscriptIndexRef.current + 1; i < transcripts.length; i++) {
      const transcript = transcripts[i];
      if (!transcript.text.trim()) continue;

      const role = transcript.speaker === 'agent' ? 'assistant' : 'user';
      const speakerKey = transcript.speaker === 'agent' ? 'agent' : 'user';
      const isFinal = transcript.isFinal;

      if (streamingMessageIdRef.current[speakerKey] && !isFinal) {
        // Update existing streaming message
        setMessages(prev => prev.map(m =>
          m.id === streamingMessageIdRef.current[speakerKey]
            ? { ...m, content: transcript.text }
            : m
        ));
      } else if (!streamingMessageIdRef.current[speakerKey]) {
        // Create new message for this speaker
        const newId = `voice-${speakerKey}-${Date.now()}`;
        streamingMessageIdRef.current[speakerKey] = newId;

        const newMessage: Message = {
          id: newId,
          role,
          content: transcript.text,
          timestamp: new Date(),
          isVoice: true,
        };
        setMessages(prev => [...prev, newMessage]);
      }

      // If final, clear the streaming ID so next utterance creates new message
      if (isFinal) {
        // Final update to ensure we have the complete text
        setMessages(prev => prev.map(m =>
          m.id === streamingMessageIdRef.current[speakerKey]
            ? { ...m, content: transcript.text }
            : m
        ));
        streamingMessageIdRef.current[speakerKey] = null;
      }
    }

    lastTranscriptIndexRef.current = transcripts.length - 1;
  }, [transcripts]);

  // Pulse animation when voice call is active
  useEffect(() => {
    if (voiceCallState === 'active') {
      const pulse = Animated.loop(
        Animated.sequence([
          Animated.timing(pulseAnim, {
            toValue: 1.15,
            duration: 1000,
            easing: Easing.inOut(Easing.ease),
            useNativeDriver: true,
          }),
          Animated.timing(pulseAnim, {
            toValue: 1,
            duration: 1000,
            easing: Easing.inOut(Easing.ease),
            useNativeDriver: true,
          }),
        ])
      );
      pulse.start();
      return () => pulse.stop();
    } else {
      pulseAnim.setValue(1);
    }
  }, [voiceCallState, pulseAnim]);

  // Rotate animation when connecting
  useEffect(() => {
    if (voiceCallState === 'connecting') {
      const rotate = Animated.loop(
        Animated.timing(rotateAnim, {
          toValue: 1,
          duration: 1500,
          easing: Easing.linear,
          useNativeDriver: true,
        })
      );
      rotate.start();
      return () => rotate.stop();
    } else {
      rotateAnim.setValue(0);
    }
  }, [voiceCallState, rotateAnim]);

  // Start voice call with Ultravox
  const startVoiceCall = useCallback(async () => {
    addLog('info', 'Starting voice call...');
    setVoiceCallState('connecting');
    Keyboard.dismiss();

    // Add system message
    const systemMsg: Message = {
      id: `system-${Date.now()}`,
      role: 'assistant',
      content: '📞 Starting voice call...',
      timestamp: new Date(),
      isSystem: true,
    };
    setMessages(prev => [...prev, systemMsg]);

    const systemPrompt = getSystemPrompt();
    addLog('api', `System prompt length: ${systemPrompt.length} chars`);

    try {
      // Configure iOS audio session for voice calls
      if (Platform.OS === 'ios') {
        addLog('info', 'Configuring iOS audio session...');
        await AudioSession.setAppleAudioConfiguration({
          audioCategory: 'playAndRecord',
          audioCategoryOptions: ['allowBluetooth', 'defaultToSpeaker', 'mixWithOthers'],
          audioMode: 'voiceChat',
        });
        await AudioSession.startAudioSession();
        addLog('info', 'iOS audio session configured');
      }

      addLog('api', 'Calling createCall API...');
      const result = await createCall({
        systemPrompt,
        firstSpeaker: 'FIRST_SPEAKER_AGENT',
      });

      if (!result.success) {
        addLog('error', `createCall failed: ${result.error}`);
        throw new Error(result.error);
      }

      addLog('api', `Call created! joinUrl: ${result.data.joinUrl?.substring(0, 50)}...`);
      addLog('info', 'Joining call via Ultravox...');
      await joinCall(result.data.joinUrl);

      addLog('info', 'joinCall completed successfully');

      // Log session info for audio debugging
      setTimeout(() => {
        if (session) {
          addLog('info', `Session active: ${!!session}`);
          addLog('info', `Session status: ${session.status}`);
        }
      }, 1000);

      // Update system message
      setMessages(prev => prev.map(m =>
        m.id === systemMsg.id
          ? { ...m, content: '📞 Voice call connected. Julia is listening...' }
          : m
      ));
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : String(err);
      addLog('error', `Voice call failed: ${errorMsg}`);
      setVoiceCallState('idle');

      // Update with error
      setMessages(prev => prev.map(m =>
        m.id === systemMsg.id
          ? { ...m, content: `❌ Failed to connect: ${errorMsg}` }
          : m
      ));
    }
  }, [joinCall, addLog]);

  // End voice call
  const endVoiceCall = useCallback(async () => {
    setVoiceCallState('ending');
    try {
      await leaveCall();
    } catch (err) {
      console.error('[Chat] Error leaving call:', err);
    }

    // Stop iOS audio session
    if (Platform.OS === 'ios') {
      try {
        await AudioSession.stopAudioSession();
      } catch (err) {
        console.error('[Chat] Error stopping audio session:', err);
      }
    }

    setVoiceCallState('idle');

    // Add end message
    const endMsg: Message = {
      id: `system-end-${Date.now()}`,
      role: 'assistant',
      content: '📞 Voice call ended.',
      timestamp: new Date(),
      isSystem: true,
    };
    setMessages(prev => [...prev, endMsg]);
  }, [leaveCall]);

  // Toggle mute
  const toggleMute = useCallback(() => {
    if (session) {
      const newMuted = !isMuted;
      if (newMuted) {
        session.muteMic();
      } else {
        session.unmuteMic();
      }
      setIsMuted(newMuted);
    }
  }, [session, isMuted]);

  // Sync voiceCallState with ref (to avoid useFocusEffect deps causing re-renders)
  useEffect(() => {
    voiceCallStateRef.current = voiceCallState;
  }, [voiceCallState]);

  // Store leaveCall in ref to avoid dependency issues
  const leaveCallRef = useRef(leaveCall);
  useEffect(() => {
    leaveCallRef.current = leaveCall;
  }, [leaveCall]);

  // End call when screen loses focus - NO dependencies to prevent callback recreation
  useFocusEffect(
    useCallback(() => {
      // Focus callback - nothing to do here
      return () => {
        // Cleanup on unfocus - use refs to get current values
        const currentState = voiceCallStateRef.current;
        if (currentState === 'active' || currentState === 'connecting') {
          console.log('[Chat] Screen unfocused, ending voice call');
          leaveCallRef.current().catch(console.error);
          // Note: Don't setVoiceCallState here - let the status change effect handle it
        }
      };
    }, []) // Empty deps - callback never recreates
  );

  // Load beneficiaries
  const loadBeneficiaries = useCallback(async () => {
    setLoadingBeneficiaries(true);
    try {
      const response = await api.getAllBeneficiaries();
      if (response.ok && response.data) {
        setBeneficiaries(response.data);
        return response.data;
      }
      return [];
    } catch (error) {
      console.error('Failed to load beneficiaries:', error);
      return [];
    } finally {
      setLoadingBeneficiaries(false);
    }
  }, []);

  // Auto-select first beneficiary
  useEffect(() => {
    const autoSelect = async () => {
      if (!currentBeneficiary) {
        const loaded = await loadBeneficiaries();
        if (loaded.length > 0) {
          setCurrentBeneficiary(loaded[0]);
        }
      }
    };
    autoSelect();
  }, []);

  const openBeneficiaryPicker = useCallback(() => {
    setShowBeneficiaryPicker(true);
    loadBeneficiaries();
  }, [loadBeneficiaries]);

  const selectBeneficiary = useCallback((beneficiary: Beneficiary) => {
    setCurrentBeneficiary(beneficiary);
    setShowBeneficiaryPicker(false);
  }, [setCurrentBeneficiary]);

  // Text chat - send message via API
  const sendTextMessage = useCallback(async () => {
    const trimmedInput = input.trim();
    if (!trimmedInput || isSending) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: trimmedInput,
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsSending(true);
    Keyboard.dismiss();

    try {
      const token = await SecureStore.getItemAsync('accessToken');
      const userName = await SecureStore.getItemAsync('userName');

      if (!token || !userName) {
        throw new Error('Please log in');
      }

      // Get beneficiary context
      let beneficiary = currentBeneficiary;
      if (!beneficiary?.id) {
        const loaded = await loadBeneficiaries();
        if (loaded.length > 0) {
          beneficiary = loaded[0];
          setCurrentBeneficiary(beneficiary);
        }
      }

      const beneficiaryName = beneficiary?.name || 'the patient';
      const deploymentId = beneficiary?.id?.toString() || '';

      // Call API
      const response = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
          function: 'voice_ask',
          clientId: '001',
          user_name: userName,
          token: token,
          question: `You are Julia, a caring assistant helping monitor ${beneficiaryName}'s wellbeing. Answer: ${trimmedInput}`,
          deployment_id: deploymentId,
          context: '',
        }).toString(),
      });

      const data = await response.json();

      if (data.ok && data.response?.body) {
        const assistantMessage: Message = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: data.response.body,
          timestamp: new Date(),
        };
        setMessages(prev => [...prev, assistantMessage]);
      } else {
        throw new Error(data.status === '401 Unauthorized' ? 'Session expired' : 'Could not get response');
      }
    } catch (error) {
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`,
        timestamp: new Date(),
      };
      setMessages(prev => [...prev, errorMessage]);
    } finally {
      setIsSending(false);
    }
  }, [input, isSending, currentBeneficiary, loadBeneficiaries, setCurrentBeneficiary]);

  // Render message bubble
  const renderMessage = ({ item }: { item: Message }) => {
    const isUser = item.role === 'user';
    const isSystem = (item as any).isSystem;
    const isVoice = (item as any).isVoice;

    if (isSystem) {
      return (
        <View style={styles.systemMessageContainer}>
          <Text style={styles.systemMessageText}>{item.content}</Text>
        </View>
      );
    }

    return (
      <View style={[styles.messageContainer, isUser ? styles.userMessageContainer : styles.assistantMessageContainer]}>
        {!isUser && (
          <View style={styles.avatarContainer}>
            <Text style={styles.avatarText}>J</Text>
          </View>
        )}
        <View style={[styles.messageBubble, isUser ? styles.userBubble : styles.assistantBubble]}>
          {isVoice && (
            <View style={styles.voiceBadge}>
              <Ionicons name="mic" size={12} color={AppColors.primary} />
              <Text style={styles.voiceBadgeText}>Voice</Text>
            </View>
          )}
          <Text style={[styles.messageText, isUser ? styles.userMessageText : styles.assistantMessageText]}>
            {item.content}
          </Text>
          <Text style={[styles.timestamp, isUser && styles.userTimestamp]}>
            {item.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
          </Text>
        </View>
      </View>
    );
  };

  // Voice call button with animations
  const renderVoiceCallButton = () => {
    const spin = rotateAnim.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });

    if (voiceCallState === 'connecting') {
      return (
        <Animated.View style={[styles.voiceCallButton, styles.voiceCallConnecting, { transform: [{ rotate: spin }] }]}>
          <Feather name="loader" size={20} color={AppColors.white} />
        </Animated.View>
      );
    }

    if (voiceCallState === 'active') {
      return (
        <Animated.View style={[styles.voiceCallButton, styles.voiceCallActive, { transform: [{ scale: pulseAnim }] }]}>
          <TouchableOpacity onPress={endVoiceCall} style={styles.voiceCallButtonInner}>
            <Ionicons name="call" size={20} color={AppColors.white} />
          </TouchableOpacity>
        </Animated.View>
      );
    }

    if (voiceCallState === 'ending') {
      return (
        <View style={[styles.voiceCallButton, styles.voiceCallEnding]}>
          <ActivityIndicator size="small" color={AppColors.white} />
        </View>
      );
    }

    // Idle state
    return (
      <TouchableOpacity style={[styles.voiceCallButton, styles.voiceCallIdle]} onPress={startVoiceCall}>
        <Ionicons name="call-outline" size={20} color={AppColors.primary} />
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => router.push('/(tabs)')}>
          <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
        </TouchableOpacity>
        <View style={styles.headerInfo}>
          <View style={styles.headerAvatar}>
            <Text style={styles.headerAvatarText}>J</Text>
          </View>
          <View>
            <Text style={styles.headerTitle}>Julia AI</Text>
            <Text style={styles.headerSubtitle}>
              {voiceCallState === 'active'
                ? `In call • ${VOICE_NAME}`
                : voiceCallState === 'connecting'
                  ? 'Connecting...'
                  : currentBeneficiary
                    ? `About ${currentBeneficiary.name}`
                    : 'Online'}
            </Text>
          </View>
        </View>
        <View style={styles.headerButtons}>
          {voiceCallState === 'active' && (
            <TouchableOpacity style={styles.headerButton} onPress={toggleMute}>
              <Ionicons
                name={isMuted ? 'mic-off' : 'mic'}
                size={22}
                color={isMuted ? AppColors.error : AppColors.textPrimary}
              />
            </TouchableOpacity>
          )}
          <TouchableOpacity style={styles.headerButton} onPress={openBeneficiaryPicker}>
            <Ionicons name="people-outline" size={22} color={AppColors.primary} />
          </TouchableOpacity>
        </View>
      </View>

      {/* Voice call indicator bar */}
      {voiceCallState === 'active' && (
        <View style={styles.voiceCallBar}>
          <View style={styles.voiceCallBarLeft}>
            <View style={styles.voiceCallBarDot} />
            <Text style={styles.voiceCallBarText}>Voice call active</Text>
          </View>
          <TouchableOpacity onPress={endVoiceCall} style={styles.voiceCallBarEnd}>
            <Text style={styles.voiceCallBarEndText}>End</Text>
          </TouchableOpacity>
        </View>
      )}

      {/* Beneficiary Picker Modal */}
      <Modal
        visible={showBeneficiaryPicker}
        transparent
        animationType="slide"
        onRequestClose={() => setShowBeneficiaryPicker(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Select Beneficiary</Text>
              <TouchableOpacity onPress={() => setShowBeneficiaryPicker(false)}>
                <Ionicons name="close" size={24} color={AppColors.textPrimary} />
              </TouchableOpacity>
            </View>

            {loadingBeneficiaries ? (
              <View style={styles.modalLoading}>
                <ActivityIndicator size="large" color={AppColors.primary} />
              </View>
            ) : beneficiaries.length === 0 ? (
              <View style={styles.modalEmpty}>
                <Text style={styles.emptyText}>No beneficiaries found</Text>
              </View>
            ) : (
              <FlatList
                data={beneficiaries}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (
                  <TouchableOpacity
                    style={[
                      styles.beneficiaryItem,
                      currentBeneficiary?.id === item.id && styles.beneficiaryItemSelected,
                    ]}
                    onPress={() => selectBeneficiary(item)}
                  >
                    <View style={styles.beneficiaryAvatar}>
                      <Text style={styles.beneficiaryAvatarText}>
                        {item.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
                      </Text>
                    </View>
                    <View style={styles.beneficiaryInfo}>
                      <Text style={styles.beneficiaryName}>{item.name}</Text>
                    </View>
                    {currentBeneficiary?.id === item.id && (
                      <Ionicons name="checkmark-circle" size={24} color={AppColors.success} />
                    )}
                  </TouchableOpacity>
                )}
                style={styles.beneficiaryList}
              />
            )}
          </View>
        </View>
      </Modal>

      {/* Messages */}
      <KeyboardAvoidingView
        style={styles.chatContainer}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
      >
        <FlatList
          ref={flatListRef}
          data={messages}
          keyExtractor={(item) => item.id}
          renderItem={renderMessage}
          contentContainerStyle={styles.messagesList}
          showsVerticalScrollIndicator={false}
          onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
        />

        {/* Input */}
        <View style={styles.inputContainer}>
          {/* Voice Call Button */}
          {renderVoiceCallButton()}

          <TextInput
            style={styles.input}
            placeholder={voiceCallState === 'active' ? 'Voice call active...' : 'Type a message...'}
            placeholderTextColor={AppColors.textMuted}
            value={input}
            onChangeText={setInput}
            multiline
            maxLength={1000}
            editable={voiceCallState !== 'active'}
            onSubmitEditing={sendTextMessage}
          />
          <TouchableOpacity
            style={[styles.sendButton, (!input.trim() || isSending || voiceCallState === 'active') && styles.sendButtonDisabled]}
            onPress={sendTextMessage}
            disabled={!input.trim() || isSending || voiceCallState === 'active'}
          >
            <Ionicons
              name={isSending ? 'hourglass' : 'send'}
              size={20}
              color={input.trim() && !isSending && voiceCallState !== 'active' ? AppColors.white : AppColors.textMuted}
            />
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>

      {/* Debug Logs Panel */}
      {showLogs && (
        <View style={styles.logsContainer}>
          <View style={styles.logsHeader}>
            <Text style={styles.logsTitle}>Debug Logs ({logs.length})</Text>
            <View style={styles.logsButtons}>
              <TouchableOpacity onPress={copyLogs} style={styles.logButton}>
                <Ionicons name="copy-outline" size={18} color={AppColors.primary} />
              </TouchableOpacity>
              <TouchableOpacity onPress={shareLogs} style={styles.logButton}>
                <Ionicons name="share-outline" size={18} color={AppColors.primary} />
              </TouchableOpacity>
              <TouchableOpacity onPress={clearLogs} style={styles.logButton}>
                <Ionicons name="trash-outline" size={18} color={AppColors.error} />
              </TouchableOpacity>
              <TouchableOpacity onPress={() => setShowLogs(false)} style={styles.logButton}>
                <Ionicons name="chevron-down" size={18} color={AppColors.textMuted} />
              </TouchableOpacity>
            </View>
          </View>
          <ScrollView
            ref={logsScrollRef}
            style={styles.logsScrollView}
            onContentSizeChange={() => logsScrollRef.current?.scrollToEnd({ animated: true })}
          >
            {logs.length === 0 ? (
              <Text style={styles.logEmpty}>No logs yet. Tap voice call button to start.</Text>
            ) : (
              logs.map((log, index) => (
                <Text
                  key={index}
                  style={[
                    styles.logLine,
                    log.type === 'error' && styles.logError,
                    log.type === 'api' && styles.logApi,
                    log.type === 'status' && styles.logStatus,
                  ]}
                >
                  [{log.time}] [{log.type.toUpperCase()}] {log.message}
                </Text>
              ))
            )}
          </ScrollView>
        </View>
      )}

      {/* Show logs toggle when hidden */}
      {!showLogs && (
        <TouchableOpacity style={styles.showLogsButton} onPress={() => setShowLogs(true)}>
          <Ionicons name="code-slash" size={16} color={AppColors.white} />
          <Text style={styles.showLogsText}>Logs ({logs.length})</Text>
        </TouchableOpacity>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.surface,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    backgroundColor: AppColors.background,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  backButton: {
    padding: Spacing.xs,
    marginRight: Spacing.sm,
  },
  headerInfo: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerAvatar: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.full,
    backgroundColor: AppColors.success,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.sm,
  },
  headerAvatarText: {
    fontSize: FontSizes.lg,
    fontWeight: '600',
    color: AppColors.white,
  },
  headerTitle: {
    fontSize: FontSizes.lg,
    fontWeight: '600',
    color: AppColors.textPrimary,
  },
  headerSubtitle: {
    fontSize: FontSizes.sm,
    color: AppColors.success,
  },
  headerButtons: {
    flexDirection: 'row',
    gap: Spacing.xs,
  },
  headerButton: {
    padding: Spacing.xs,
  },
  voiceCallBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: AppColors.success,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
  },
  voiceCallBarLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  voiceCallBarDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: AppColors.white,
    marginRight: Spacing.sm,
  },
  voiceCallBarText: {
    fontSize: FontSizes.sm,
    fontWeight: '500',
    color: AppColors.white,
  },
  voiceCallBarEnd: {
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.xs,
    backgroundColor: 'rgba(255,255,255,0.2)',
    borderRadius: BorderRadius.md,
  },
  voiceCallBarEndText: {
    fontSize: FontSizes.sm,
    fontWeight: '600',
    color: AppColors.white,
  },
  chatContainer: {
    flex: 1,
  },
  messagesList: {
    padding: Spacing.md,
    paddingBottom: Spacing.lg,
  },
  messageContainer: {
    flexDirection: 'row',
    marginBottom: Spacing.md,
    alignItems: 'flex-end',
  },
  userMessageContainer: {
    justifyContent: 'flex-end',
  },
  assistantMessageContainer: {
    justifyContent: 'flex-start',
  },
  systemMessageContainer: {
    alignItems: 'center',
    marginVertical: Spacing.sm,
  },
  systemMessageText: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
    fontStyle: 'italic',
  },
  avatarContainer: {
    width: 32,
    height: 32,
    borderRadius: BorderRadius.full,
    backgroundColor: AppColors.success,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.xs,
  },
  avatarText: {
    fontSize: FontSizes.sm,
    fontWeight: '600',
    color: AppColors.white,
  },
  messageBubble: {
    maxWidth: '75%',
    padding: Spacing.sm + 4,
    borderRadius: BorderRadius.lg,
  },
  userBubble: {
    backgroundColor: AppColors.primary,
    borderBottomRightRadius: BorderRadius.sm,
  },
  assistantBubble: {
    backgroundColor: AppColors.background,
    borderBottomLeftRadius: BorderRadius.sm,
  },
  voiceBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: Spacing.xs,
  },
  voiceBadgeText: {
    fontSize: FontSizes.xs,
    color: AppColors.primary,
    marginLeft: 4,
  },
  messageText: {
    fontSize: FontSizes.base,
    lineHeight: 22,
  },
  userMessageText: {
    color: AppColors.white,
  },
  assistantMessageText: {
    color: AppColors.textPrimary,
  },
  timestamp: {
    fontSize: FontSizes.xs,
    color: AppColors.textMuted,
    marginTop: Spacing.xs,
    alignSelf: 'flex-end',
  },
  userTimestamp: {
    color: 'rgba(255,255,255,0.7)',
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    padding: Spacing.md,
    backgroundColor: AppColors.background,
    borderTopWidth: 1,
    borderTopColor: AppColors.border,
  },
  voiceCallButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.sm,
  },
  voiceCallButtonInner: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  voiceCallIdle: {
    backgroundColor: AppColors.surface,
    borderWidth: 1,
    borderColor: AppColors.primary,
  },
  voiceCallConnecting: {
    backgroundColor: AppColors.warning || '#FF9800',
  },
  voiceCallActive: {
    backgroundColor: AppColors.success,
  },
  voiceCallEnding: {
    backgroundColor: AppColors.textMuted,
  },
  input: {
    flex: 1,
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    fontSize: FontSizes.base,
    color: AppColors.textPrimary,
    maxHeight: 100,
    marginRight: Spacing.sm,
  },
  sendButton: {
    width: 44,
    height: 44,
    borderRadius: BorderRadius.full,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  sendButtonDisabled: {
    backgroundColor: AppColors.surface,
  },
  // Modal styles
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: AppColors.background,
    borderTopLeftRadius: BorderRadius.xl,
    borderTopRightRadius: BorderRadius.xl,
    maxHeight: '70%',
    paddingBottom: Spacing.xl,
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: Spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  modalTitle: {
    fontSize: FontSizes.lg,
    fontWeight: '600',
    color: AppColors.textPrimary,
  },
  modalLoading: {
    padding: Spacing.xl,
    alignItems: 'center',
  },
  modalEmpty: {
    padding: Spacing.xl,
    alignItems: 'center',
  },
  emptyText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
  },
  beneficiaryList: {
    paddingHorizontal: Spacing.md,
  },
  beneficiaryItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: Spacing.md,
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.md,
    marginTop: Spacing.sm,
  },
  beneficiaryItemSelected: {
    backgroundColor: AppColors.primaryLight || '#E3F2FD',
    borderWidth: 1,
    borderColor: AppColors.primary,
  },
  beneficiaryAvatar: {
    width: 44,
    height: 44,
    borderRadius: BorderRadius.full,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.md,
  },
  beneficiaryAvatarText: {
    fontSize: FontSizes.base,
    fontWeight: '600',
    color: AppColors.white,
  },
  beneficiaryInfo: {
    flex: 1,
  },
  beneficiaryName: {
    fontSize: FontSizes.base,
    fontWeight: '500',
    color: AppColors.textPrimary,
  },
  // Debug Logs styles
  logsContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#1a1a2e',
    borderTopLeftRadius: BorderRadius.lg,
    borderTopRightRadius: BorderRadius.lg,
    maxHeight: 200,
    zIndex: 100,
  },
  logsHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: '#2d2d44',
  },
  logsTitle: {
    fontSize: FontSizes.sm,
    fontWeight: '600',
    color: '#fff',
  },
  logsButtons: {
    flexDirection: 'row',
    gap: Spacing.sm,
  },
  logButton: {
    padding: Spacing.xs,
  },
  logsScrollView: {
    maxHeight: 150,
    paddingHorizontal: Spacing.sm,
    paddingVertical: Spacing.xs,
  },
  logEmpty: {
    color: '#888',
    fontSize: FontSizes.sm,
    fontStyle: 'italic',
    padding: Spacing.md,
    textAlign: 'center',
  },
  logLine: {
    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
    fontSize: 11,
    color: '#ccc',
    paddingVertical: 2,
  },
  logError: {
    color: '#ff6b6b',
  },
  logApi: {
    color: '#4ecdc4',
  },
  logStatus: {
    color: '#ffe66d',
  },
  showLogsButton: {
    position: 'absolute',
    bottom: 100,
    right: Spacing.md,
    backgroundColor: '#1a1a2e',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.sm,
    borderRadius: BorderRadius.full,
    gap: Spacing.xs,
    zIndex: 50,
  },
  showLogsText: {
    color: '#fff',
    fontSize: FontSizes.sm,
    fontWeight: '500',
  },
});