/**
 * FlowScreen - AI Chat Interface
 * 
 * Main chat screen for AI conversations with history management.
 * Features:
 * - Current conversation displayed in main window
 * - Chat history accessible from top-right button
 * - ChatGPT-style input bar at bottom
 */

import React, { useState, useRef, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Modal,
  TextInput,
  SafeAreaView,
  ActivityIndicator,
  Alert,
  FlatList,
  Animated,
  Image,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons, Feather, FontAwesome5 } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { AIRole } from '../types';
import { colors, typography, spacing, borderRadius, shadows } from '../theme/colors';
import { aiService, AIMessage } from '../services/ai.service';
import { langGraphService } from '../services/langgraph.service';
import { HumanMessage, AIMessage as LangChainAIMessage, SystemMessage } from "@langchain/core/messages";
import { assetsService } from '../services/assets.service';
import { useAuth } from '../context/AuthContext';
import { AI_CONFIG, getVaultStorageKeys } from '../config';
import { storageService } from '../services/storage.service';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { SentinelVault } from '../utils/crypto_core';
import { Buffer } from 'buffer';

// =============================================================================
// Type Definitions
// =============================================================================

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  imageUri?: string;
  createdAt: Date;
}

interface ChatSession {
  id: string;
  title: string;
  messages: ChatMessage[];
  createdAt: Date;
  updatedAt: Date;
}

// =============================================================================
// Component
// =============================================================================

export default function FlowScreen() {
  const { token, user, signOut, aiRoles, refreshAIRoles } = useAuth();
  const scrollViewRef = useRef<ScrollView>(null);

  // Current conversation state
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [newContent, setNewContent] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  // AI Role state - start with null to detect first load
  const [selectedRole, setSelectedRole] = useState<AIRole | null>(aiRoles[0] || null);
  const [showRoleModal, setShowRoleModal] = useState(false);
  const [expandedRoleId, setExpandedRoleId] = useState<string | null>(null);

  // History modal state
  const [showHistoryModal, setShowHistoryModal] = useState(false);
  const modalSlideAnim = useRef(new Animated.Value(0)).current;

  // Summary state
  const [showSummaryConfirmModal, setShowSummaryConfirmModal] = useState(false);
  const [showSummaryResultModal, setShowSummaryResultModal] = useState(false);
  const [isSummarizing, setIsSummarizing] = useState(false);
  const [generatedSummary, setGeneratedSummary] = useState('');

  // Save to Vault state
  const [showVaultConfirmModal, setShowVaultConfirmModal] = useState(false);
  const [showSaveResultModal, setShowSaveResultModal] = useState(false);
  const [saveResult, setSaveResult] = useState<{ success: boolean; message: string }>({ success: true, message: '' });
  const [isSavingToVault, setIsSavingToVault] = useState(false);

  const [chatHistory, setChatHistory] = useState<ChatSession[]>([
    // Sample history data
    {
      id: '1',
      title: 'Morning reflection',
      messages: [],
      createdAt: new Date('2024-01-18T10:30:00'),
      updatedAt: new Date('2024-01-18T10:45:00'),
    },
    {
      id: '2',
      title: 'Project brainstorm',
      messages: [],
      createdAt: new Date('2024-01-17T14:00:00'),
      updatedAt: new Date('2024-01-17T15:30:00'),
    },
    {
      id: '3',
      title: 'Evening thoughts',
      messages: [],
      createdAt: new Date('2024-01-16T20:00:00'),
      updatedAt: new Date('2024-01-16T20:30:00'),
    },
  ]);

  // Header date display
  const today = new Date();
  const dateStr = today.toLocaleDateString('en-US', {
    weekday: 'long',
    month: 'long',
    day: 'numeric'
  });

  // Load history on mount
  useEffect(() => {
    const loadHistory = async () => {
      if (!user) return;
      try {
        console.log('[FlowScreen] Loading chat history...');
        const savedHistory = await storageService.getChatHistory(user.id);
        if (savedHistory && savedHistory.length > 0) {
          const formattedHistory = savedHistory.map((session: any) => ({
            ...session,
            createdAt: new Date(session.createdAt),
            updatedAt: new Date(session.updatedAt),
            messages: session.messages.map((msg: any) => ({
              ...msg,
              createdAt: new Date(msg.createdAt)
            }))
          }));
          setChatHistory(formattedHistory);
          console.log('[FlowScreen] Chat history loaded:', formattedHistory.length, 'sessions');
        } else {
          console.log('[FlowScreen] No chat history found');
        }
      } catch (error) {
        console.error('Failed to load history:', error);
      }
    };
    loadHistory();
  }, [user]);

  // Load messages whenever role changes
  useEffect(() => {
    const loadRoleMessages = async () => {
      if (!user || !selectedRole) return;
      try {
        const savedMessages = await storageService.getCurrentChat(selectedRole?.id || '', user.id);
        if (savedMessages) {
          const formattedMessages = savedMessages.map((msg: any) => ({
            ...msg,
            createdAt: new Date(msg.createdAt)
          }));
          setMessages(formattedMessages);
        } else {
          setMessages([]);
        }
      } catch (error) {
        if (selectedRole) {
          console.error(`Failed to load messages for role ${selectedRole?.id}:`, error);
        }
        setMessages([]);
      }
    };

    loadRoleMessages();
  }, [selectedRole?.id, user]);

  // Ensure we have a valid selected role from the dynamic list
  useEffect(() => {
    if (aiRoles.length > 0) {
      if (!selectedRole) {
        // Initial load or first time roles become available
        setSelectedRole(aiRoles[0]);
      } else {
        // If roles refreshed, make sure current selectedRole is still valid or updated
        const updatedRole = aiRoles.find(r => r.id === selectedRole?.id);
        if (updatedRole) {
          setSelectedRole(updatedRole);
        } else {
          // Current role no longer exists in dynamic list, fallback to first
          setSelectedRole(aiRoles[0]);
        }
      }
    } else if (!selectedRole) {
      // Fallback if no dynamic roles yet
      setSelectedRole(AI_CONFIG.ROLES[0]);
    }
  }, [aiRoles]);

  // Save current messages for the active role when they change
  useEffect(() => {
    if (user && selectedRole && messages.length >= 0) { // Save even if empty to allow clearing
      storageService.saveCurrentChat(selectedRole?.id || '', messages, user.id);
    }

    if (messages.length > 0) {
      setTimeout(() => {
        scrollViewRef.current?.scrollToEnd({ animated: true });
      }, 100);
    }
  }, [messages, selectedRole?.id, user]);

  // Save history when it changes
  useEffect(() => {
    if (user) {
      storageService.saveChatHistory(chatHistory, user.id);
    }
  }, [chatHistory, user]);

  // Modal animation control
  const openHistoryModal = () => {
    setShowHistoryModal(true);
    Animated.spring(modalSlideAnim, {
      toValue: 1,
      useNativeDriver: true,
      tension: 65,
      friction: 11,
    }).start();
  };

  const closeHistoryModal = () => {
    Animated.timing(modalSlideAnim, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start(() => {
      setShowHistoryModal(false);
    });
  };

  // =============================================================================
  // Event Handlers
  // =============================================================================

  /**
   * Handle sending a message to AI
   */
  const handleSendMessage = async () => {
    if (!newContent.trim() || isSending || !selectedRole) return;

    // Check authentication
    if (!token) {
      Alert.alert(
        'Login Required',
        'Please login to send messages',
        [{ text: 'OK', onPress: () => signOut() }]
      );
      return;
    }

    const userMessage = newContent.trim();
    setIsSending(true);
    setNewContent('');

    // Add user message immediately
    const userMsg: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: userMessage,
      createdAt: new Date(),
    };
    setMessages(prev => [...prev, userMsg]);

    try {
      // 1. Convert current messages history to LangChain format
      const history: (HumanMessage | LangChainAIMessage | SystemMessage)[] = messages.map(msg => {
        if (msg.role === 'user') return new HumanMessage(msg.content);
        return new LangChainAIMessage(msg.content);
      });

      // 2. Add system prompt
      const systemPrompt = new SystemMessage(selectedRole?.systemPrompt || '');

      // 3. Add current new message
      const currentMsg = new HumanMessage(userMessage);

      // 4. Combine all messages for LangGraph processing
      const fullMessages = [systemPrompt, ...history, currentMsg];

      // 5. Execute via LangGraph service (handles token limits and context)
      const aiResponse = await langGraphService.execute(fullMessages, token);

      // Add AI response
      const aiMsg: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: aiResponse,
        createdAt: new Date(),
      };
      setMessages(prev => [...prev, aiMsg]);

    } catch (error) {
      console.error('AI request failed:', error);

      const errorMessage = error instanceof Error ? error.message : String(error);

      // Handle authentication errors (401, credentials, unauthorized)
      const isAuthError =
        errorMessage.includes('401') ||
        errorMessage.includes('credentials') ||
        errorMessage.includes('Unauthorized') ||
        errorMessage.includes('Not authenticated') ||
        errorMessage.includes('validate');

      if (isAuthError) {
        signOut();
        Alert.alert(
          'Session Expired',
          'Your login session has expired. Please login again.',
          [{ text: 'OK' }]
        );
        return;
      }

      // Show error as AI message
      const errorMsg: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `Error: ${errorMessage}`,
        createdAt: new Date(),
      };
      setMessages(prev => [...prev, errorMsg]);
    } finally {
      setIsSending(false);
    }
  };

  /**
   * Handle voice recording toggle
   */
  const handleVoiceRecord = () => {
    setIsRecording(!isRecording);
    // TODO: Implement voice recording functionality
  };

  /**
   * Handle image attachment - pick image and analyze with AI
   */
  const handleAddImage = async () => {
    // Request permission
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('Permission Required', 'Please grant permission to access photos');
      return;
    }

    // Pick image
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 0.8,
      base64: true,
    });

    if (!result.canceled && result.assets[0]) {
      const imageAsset = result.assets[0];
      setSelectedImage(imageAsset.uri);

      // Check authentication
      if (!token) {
        Alert.alert(
          'Login Required',
          'Please login to analyze images',
          [{ text: 'OK', onPress: () => signOut() }]
        );
        return;
      }

      setIsSending(true);

      // Add user message with image
      const userMsg: ChatMessage = {
        id: Date.now().toString(),
        role: 'user',
        content: 'Analyze this image',
        imageUri: imageAsset.uri,
        createdAt: new Date(),
      };
      setMessages(prev => [...prev, userMsg]);

      try {
        // Call AI with image (using base64)
        const aiResponse = await aiService.sendMessageWithImage(
          'Please describe and analyze this image in detail.',
          imageAsset.base64 || '',
          token
        );

        const aiMsg: ChatMessage = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: aiResponse,
          createdAt: new Date(),
        };
        setMessages(prev => [...prev, aiMsg]);
      } catch (error) {
        console.error('AI image analysis failed:', error);
        const errorMessage = error instanceof Error ? error.message : 'Unknown error';

        // Handle authentication errors
        const isAuthError =
          errorMessage.includes('401') ||
          errorMessage.includes('Unauthorized') ||
          errorMessage.includes('credentials') ||
          errorMessage.includes('validate');

        if (isAuthError) {
          signOut();
          Alert.alert(
            'Session Expired',
            'Your login session has expired. Please login again.',
            [{ text: 'OK' }]
          );
          return;
        }

        const errorMsg: ChatMessage = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: `⚠️ Error analyzing image: ${errorMessage}`,
          createdAt: new Date(),
        };
        setMessages(prev => [...prev, errorMsg]);
      } finally {
        setIsSending(false);
        setSelectedImage(null);
      }
    }
  };

  /**
   * Start a new conversation
   */
  const handleNewChat = () => {
    // Save current conversation to history if it has messages
    if (messages.length > 0) {
      const newSession: ChatSession = {
        id: Date.now().toString(),
        title: messages[0]?.content.substring(0, 30) + '...' || 'New conversation',
        messages: [...messages],
        createdAt: messages[0]?.createdAt || new Date(),
        updatedAt: new Date(),
      };
      setChatHistory(prev => [newSession, ...prev]);
    }

    // Clear current messages and storage for this role
    setMessages([]);
    if (user && selectedRole) {
      storageService.saveCurrentChat(selectedRole?.id || '', [], user.id);
    }
    closeHistoryModal();
  };

  /**
   * Load a conversation from history
   */
  const handleLoadHistory = (session: ChatSession) => {
    // Save current conversation first if it has messages
    if (messages.length > 0) {
      const currentSession: ChatSession = {
        id: Date.now().toString(),
        title: messages[0]?.content.substring(0, 30) + '...' || 'Conversation',
        messages: [...messages],
        createdAt: messages[0]?.createdAt || new Date(),
        updatedAt: new Date(),
      };
      setChatHistory(prev => [currentSession, ...prev.filter(s => s.id !== session.id)]);
    }

    // Load selected conversation
    setMessages(session.messages);
    closeHistoryModal();
  };

  /**
   * Delete a conversation from history
   */
  const handleDeleteHistory = (sessionId: string) => {
    Alert.alert(
      'Delete Conversation',
      'Are you sure you want to delete this conversation?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: () => setChatHistory(prev => prev.filter(s => s.id !== sessionId))
        },
      ]
    );
  };

  /**
   * Handle generating summary for current conversation
   */
  const handleGenerateSummary = async () => {
    if (messages.length === 0) {
      Alert.alert('No Messages', 'There are no messages to summarize.');
      return;
    }

    if (!token) {
      Alert.alert('Login Required', 'Please login to generate a summary.');
      return;
    }

    setShowSummaryConfirmModal(false);
    setIsSummarizing(true);

    try {
      // Convert messages to AIMessage format
      const aiMessages: AIMessage[] = messages.map(msg => ({
        role: msg.role,
        content: msg.content,
      }));

      const summary = await aiService.summarizeChat(aiMessages, token);
      setGeneratedSummary(summary);
      setShowSummaryResultModal(true);
    } catch (error) {
      console.error('Failed to generate summary:', error);
      Alert.alert('Error', 'Failed to generate summary. Please try again later.');
    } finally {
      setIsSummarizing(false);
    }
  };

  /**
   * Handle saving the generated summary to the vault
   */
  const handleSaveToVault = async () => {
    if (!generatedSummary || isSavingToVault) return;

    if (!token) {
      Alert.alert('Login Required', 'Please login to save to vault.');
      return;
    }

    setShowVaultConfirmModal(false);
    setIsSavingToVault(true);

    try {
      // Retrieve vault keys
      if (!user) {
        Alert.alert('Error', 'User information not found. Please login again.');
        return;
      }
      const vaultKeys = getVaultStorageKeys(user.id);
      const shareServer = await AsyncStorage.getItem(vaultKeys.SHARE_SERVER);
      const aesKeyHex = await AsyncStorage.getItem(vaultKeys.AES_KEY);

      if (!shareServer || !aesKeyHex) {
        Alert.alert(
          'Vault Not Initialized',
          'Your vault is not fully initialized. Please set it up in the Vault tab first.'
        );
        return;
      }

      // Encrypt summary with AES key
      const vault = new SentinelVault();
      const aesKey = Buffer.from(aesKeyHex, 'hex');
      const encryptedSummary = vault.encryptData(aesKey, generatedSummary).toString('hex');

      // Create asset in backend
      const createdAsset = await assetsService.createAsset({
        title: `Chat Summary - ${new Date().toLocaleDateString()}`,
        private_key_shard: shareServer,
        content_inner_encrypted: encryptedSummary,
      }, token);

      // Backup plaintext content locally
      if (createdAsset && createdAsset.id && user?.id) {
        await storageService.saveAssetBackup(createdAsset.id, generatedSummary, user.id);
      }

      setSaveResult({ success: true, message: 'Summary encrypted and saved to your vault successfully.' });
      setShowSaveResultModal(true);
    } catch (error) {
      console.error('Failed to save to vault:', error);
      setSaveResult({ success: false, message: 'Failed to save summary to vault. Please try again.' });
      setShowSaveResultModal(true);
    } finally {
      setIsSavingToVault(false);
    }
  };

  /**
   * Handle closing all summary related modals after successful save or manual close of result
   */
  const handleFinishSaveFlow = () => {
    setShowSaveResultModal(false);
    if (saveResult.success) {
      setShowSummaryResultModal(false);
      setShowVaultConfirmModal(false);
    }
  };

  // =============================================================================
  // Helper Functions
  // =============================================================================

  const formatTime = (date: Date) => {
    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  };

  // =============================================================================
  // Render Functions
  // =============================================================================

  /**
   * Render a single chat message bubble
   */
  const renderMessage = (message: ChatMessage, index: number) => {
    const isUser = message.role === 'user';

    return (
      <View
        key={message.id}
        style={[
          styles.messageBubble,
          isUser ? styles.userBubble : styles.aiBubble
        ]}
      >
        {!isUser && (
          <View style={styles.aiAvatar}>
            <Feather name="feather" size={16} color={colors.nautical.teal} />
          </View>
        )}
        <View style={[
          styles.messageContent,
          isUser ? styles.userContent : styles.aiContent
        ]}>
          {/* Show image if present */}
          {message.imageUri && (
            <Image
              source={{ uri: message.imageUri }}
              style={styles.messageImage}
              resizeMode="cover"
            />
          )}
          <Text style={[
            styles.messageText,
            isUser ? styles.userText : styles.aiText
          ]}>
            {message.content}
          </Text>
          <Text style={[
            styles.messageTime,
            isUser ? styles.userMessageTime : styles.aiMessageTime
          ]}>
            {formatTime(message.createdAt)}
          </Text>
        </View>
      </View>
    );
  };

  /**
   * Render empty state when no messages
   */
  const renderEmptyState = () => (
    <View style={styles.emptyState}>
      <View style={styles.emptyIcon}>
        <Feather name="feather" size={48} color={colors.nautical.seafoam} />
      </View>
      <Text style={styles.emptyTitle}>Chatting with {selectedRole?.name || 'AI'}</Text>
      <Text style={styles.emptySubtitle}>
        {selectedRole?.description || 'Loading AI Assistant...'}
      </Text>
    </View>
  );

  /**
   * Render history item in modal
   */
  const renderHistoryItem = ({ item }: { item: ChatSession }) => (
    <TouchableOpacity
      style={styles.historyItem}
      onPress={() => handleLoadHistory(item)}
      onLongPress={() => handleDeleteHistory(item.id)}
    >
      <View style={styles.historyItemIcon}>
        <Ionicons name="chatbubble-outline" size={20} color={colors.flow.primary} />
      </View>
      <View style={styles.historyItemContent}>
        <Text style={styles.historyItemTitle} numberOfLines={1}>
          {item.title}
        </Text>
        <Text style={styles.historyItemDate}>
          {formatDate(item.updatedAt)} • {item.messages.length} messages
        </Text>
      </View>
      <Ionicons name="chevron-forward" size={20} color={colors.flow.textSecondary} />
    </TouchableOpacity>
  );

  // =============================================================================
  // Main Render
  // =============================================================================

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={[colors.flow.backgroundGradientStart, colors.flow.backgroundGradientEnd]}
        style={styles.gradient}
      >
        <SafeAreaView style={styles.safeArea}>
          {/* Header */}
          <View style={styles.header}>
            <View style={styles.headerLeft}>
              <View style={styles.iconCircle}>
                <FontAwesome5 name="scroll" size={18} color={colors.flow.primary} />
              </View>
              <View>
                <Text style={styles.headerTitle}>Flow</Text>
                <Text style={styles.headerDate}>{dateStr}</Text>
              </View>
            </View>

            {/* Role Header Dropdown */}
            <TouchableOpacity
              style={styles.headerRoleButton}
              onPress={() => setShowRoleModal(true)}
              activeOpacity={0.7}
            >
              {selectedRole && (
                <Ionicons
                  name={(selectedRole?.icon || 'help-outline') as any}
                  size={16}
                  color={colors.nautical.teal}
                />
              )}
              <Text style={styles.headerRoleText} numberOfLines={1}>
                {selectedRole?.name || 'Loading...'}
              </Text>
              <Ionicons name="chevron-down" size={14} color={colors.flow.textSecondary} />
            </TouchableOpacity>

            {/* Summary Button */}
            <TouchableOpacity
              style={[styles.historyButton, { marginRight: spacing.sm }]}
              onPress={() => setShowSummaryConfirmModal(true)}
              disabled={messages.length === 0 || isSummarizing}
            >
              <Ionicons
                name="document-text-outline"
                size={20}
                color={messages.length === 0 || isSummarizing ? colors.flow.textSecondary : colors.flow.primary}
              />
            </TouchableOpacity>

            {/* History Button */}
            <TouchableOpacity
              style={styles.historyButton}
              onPress={openHistoryModal}
            >
              <Ionicons name="time-outline" size={20} color={colors.flow.primary} />
            </TouchableOpacity>
          </View>

          {/* Chat Messages */}
          <ScrollView
            ref={scrollViewRef}
            style={styles.messagesContainer}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={[
              styles.messagesContent,
              messages.length === 0 && styles.emptyContent
            ]}
          >
            {messages.length === 0 ? (
              renderEmptyState()
            ) : (
              messages.map((message, index) => renderMessage(message, index))
            )}

            {/* Loading indicator when sending */}
            {isSending && (
              <View style={[styles.messageBubble, styles.aiBubble]}>
                <View style={styles.aiAvatar}>
                  <Feather name="feather" size={16} color={colors.nautical.teal} />
                </View>
                <View style={[styles.messageContent, styles.aiContent]}>
                  <ActivityIndicator size="small" color={colors.nautical.teal} />
                </View>
              </View>
            )}

            <View style={{ height: 20 }} />
          </ScrollView>

          {/* Bottom Input Bar */}
          <View style={styles.inputBarContainer}>
            <View style={styles.inputBar}>
              {/* Image attachment button */}
              <TouchableOpacity
                style={styles.inputBarButton}
                onPress={handleAddImage}
                activeOpacity={0.7}
              >
                <Feather name="image" size={22} color={colors.flow.textSecondary} />
              </TouchableOpacity>

              {/* Text Input */}
              <View style={styles.inputWrapper}>
                <TextInput
                  style={styles.inputBarText}
                  placeholder="Message..."
                  placeholderTextColor={colors.flow.textSecondary}
                  value={newContent}
                  onChangeText={setNewContent}
                  multiline
                  maxLength={500}
                />
              </View>

              {/* Send or Voice button */}
              {newContent.trim() || isSending ? (
                <TouchableOpacity
                  style={[styles.sendButton, isSending && styles.sendButtonDisabled]}
                  onPress={handleSendMessage}
                  activeOpacity={0.8}
                  disabled={isSending}
                >
                  <LinearGradient
                    colors={[colors.nautical.teal, colors.nautical.seafoam]}
                    style={styles.sendButtonGradient}
                  >
                    {isSending ? (
                      <ActivityIndicator size="small" color="#fff" />
                    ) : (
                      <Ionicons name="arrow-up" size={20} color="#fff" />
                    )}
                  </LinearGradient>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  style={[styles.inputBarButton, isRecording && styles.recordingButton]}
                  onPress={handleVoiceRecord}
                  activeOpacity={0.7}
                >
                  <Feather
                    name="mic"
                    size={22}
                    color={isRecording ? '#fff' : colors.flow.textSecondary}
                  />
                </TouchableOpacity>
              )}
            </View>
          </View>
        </SafeAreaView>
      </LinearGradient>

      <Modal
        visible={showHistoryModal}
        animationType="none"
        transparent
        onRequestClose={closeHistoryModal}
      >
        <TouchableWithoutFeedback onPress={closeHistoryModal}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
              <Animated.View
                style={[
                  styles.modalContent,
                  {
                    transform: [{
                      translateY: modalSlideAnim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [600, 0],
                      })
                    }]
                  }
                ]}
              >
                <View style={styles.modalHandle} />

                {/* Modal Header */}
                <View style={styles.modalHeader}>
                  <Text style={styles.modalTitle}>Chat History</Text>
                  <TouchableOpacity
                    style={styles.newChatButton}
                    onPress={handleNewChat}
                  >
                    <Ionicons name="add" size={20} color="#fff" />
                    <Text style={styles.newChatText}>New Chat</Text>
                  </TouchableOpacity>
                </View>

                {/* History List */}
                <FlatList
                  data={chatHistory}
                  renderItem={renderHistoryItem}
                  keyExtractor={item => item.id}
                  style={styles.historyList}
                  ListEmptyComponent={
                    <View style={styles.historyEmpty}>
                      <Ionicons name="chatbubbles-outline" size={48} color={colors.flow.textSecondary} />
                      <Text style={styles.historyEmptyText}>No chat history yet</Text>
                    </View>
                  }
                />

                {/* Close Button */}
                <TouchableOpacity
                  style={styles.closeButton}
                  onPress={closeHistoryModal}
                >
                  <Text style={styles.closeButtonText}>Close</Text>
                </TouchableOpacity>
              </Animated.View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>

      {/* Role Selection Modal */}
      <Modal
        visible={showRoleModal}
        animationType="fade"
        transparent
        onRequestClose={() => setShowRoleModal(false)}
      >
        <TouchableWithoutFeedback onPress={() => setShowRoleModal(false)}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
              <View style={[styles.modalContent, styles.roleModalContent]}>
                <View style={styles.modalHandle} />
                <Text style={styles.modalTitle}>Choose AI Assistant</Text>

                <ScrollView style={styles.roleList} showsVerticalScrollIndicator={false}>
                  {aiRoles.map((role) => (
                    <View key={role.id} style={styles.roleItemContainer}>
                      <View
                        style={[
                          styles.roleItem,
                          selectedRole?.id === role.id && styles.roleItemActive
                        ]}
                      >
                        <TouchableOpacity
                          style={styles.roleSelectionArea}
                          onPress={() => {
                            setSelectedRole(role);
                            setShowRoleModal(false);
                          }}
                        >
                          <View style={[
                            styles.roleItemIcon,
                            selectedRole?.id === role.id && styles.roleItemIconActive
                          ]}>
                            <Ionicons
                              name={role.icon as any}
                              size={20}
                              color={selectedRole?.id === role.id ? '#fff' : colors.nautical.teal}
                            />
                          </View>
                          <Text style={[
                            styles.roleItemName,
                            selectedRole?.id === role.id && styles.roleItemNameActive
                          ]}>
                            {role.name}
                          </Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                          style={styles.infoButton}
                          onPress={() => {
                            setExpandedRoleId(expandedRoleId === role.id ? null : role.id);
                          }}
                        >
                          <Ionicons
                            name={expandedRoleId === role.id ? "close-circle-outline" : "information-circle-outline"}
                            size={24}
                            color={expandedRoleId === role.id ? colors.nautical.coral : colors.flow.textSecondary}
                          />
                        </TouchableOpacity>
                      </View>

                      {expandedRoleId === role.id && (
                        <View style={styles.roleDescription}>
                          <Text style={styles.roleDescriptionText}>{role.description}</Text>
                        </View>
                      )}
                    </View>
                  ))}
                </ScrollView>

                <TouchableOpacity
                  style={styles.closeButton}
                  onPress={() => setShowRoleModal(false)}
                >
                  <Text style={styles.closeButtonText}>Cancel</Text>
                </TouchableOpacity>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>

      {/* Summary Confirmation Modal */}
      <Modal
        visible={showSummaryConfirmModal}
        transparent
        animationType="fade"
        onRequestClose={() => setShowSummaryConfirmModal(false)}
      >
        <TouchableWithoutFeedback onPress={() => setShowSummaryConfirmModal(false)}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
              <View style={[styles.modalContent, { paddingBottom: spacing.xl }]}>
                <View style={styles.modalHandle} />
                <Text style={styles.modalTitle}>Generate Summary</Text>
                <Text style={[styles.modalSubtitle, { marginVertical: spacing.base }]}>
                  Would you like to generate a summary for the current conversation?
                </Text>

                <View style={styles.modalActions}>
                  <TouchableOpacity
                    style={[styles.actionButton, styles.cancelButton]}
                    onPress={() => setShowSummaryConfirmModal(false)}
                  >
                    <Text style={styles.cancelButtonText}>No</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.actionButton, styles.confirmButton]}
                    onPress={handleGenerateSummary}
                  >
                    <LinearGradient
                      colors={[colors.nautical.teal, colors.nautical.seafoam]}
                      style={styles.actionButtonGradient}
                    >
                      <Text style={styles.confirmButtonText}>Yes, Generate</Text>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>

      {/* Summary Result Modal */}
      <Modal
        visible={showSummaryResultModal}
        transparent
        animationType="slide"
        onRequestClose={() => setShowSummaryResultModal(false)}
      >
        <TouchableWithoutFeedback onPress={() => setShowSummaryResultModal(false)}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
              <View style={[styles.modalContent, { maxHeight: '70%' }]}>
                <View style={styles.modalHandle} />
                <View style={styles.modalHeader}>
                  <Text style={styles.modalTitle}>Conversation Summary</Text>
                  <TouchableOpacity onPress={() => setShowSummaryResultModal(false)}>
                    <Ionicons name="close" size={24} color={colors.flow.textSecondary} />
                  </TouchableOpacity>
                </View>

                <ScrollView style={styles.summaryContainer} showsVerticalScrollIndicator={false}>
                  <View style={styles.summaryCard}>
                    <Text style={styles.summaryText}>{generatedSummary}</Text>
                  </View>
                </ScrollView>

                <View style={styles.summaryActions}>
                  <TouchableOpacity
                    style={[styles.actionButton, styles.saveToVaultButton]}
                    onPress={() => setShowVaultConfirmModal(true)}
                    disabled={isSavingToVault}
                  >
                    <LinearGradient
                      colors={[colors.nautical.teal, colors.nautical.seafoam]}
                      style={styles.actionButtonGradient}
                    >
                      {isSavingToVault ? (
                        <ActivityIndicator size="small" color="#fff" />
                      ) : (
                        <>
                          <Ionicons name="shield-checkmark-outline" size={20} color="#fff" />
                          <Text style={styles.confirmButtonText}>Save to Vault</Text>
                        </>
                      )}
                    </LinearGradient>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={styles.closeButton}
                    onPress={() => setShowSummaryResultModal(false)}
                  >
                    <Text style={styles.closeButtonText}>Done</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>

      {/* Save to Vault Confirmation Modal */}
      <Modal
        visible={showVaultConfirmModal}
        transparent
        animationType="fade"
        onRequestClose={() => setShowVaultConfirmModal(false)}
      >
        <TouchableWithoutFeedback onPress={() => setShowVaultConfirmModal(false)}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
              <View style={[styles.modalContent, { paddingBottom: spacing.xl }]}>
                <View style={styles.modalHandle} />
                <Text style={styles.modalTitle}>Save to Vault</Text>
                <Text style={[styles.modalSubtitle, { marginVertical: spacing.base }]}>
                  Would you like to securely save this summary to your digital vault?
                </Text>

                <View style={styles.modalActions}>
                  <TouchableOpacity
                    style={[styles.actionButton, styles.cancelButton]}
                    onPress={() => setShowVaultConfirmModal(false)}
                  >
                    <Text style={styles.cancelButtonText}>Cancel</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.actionButton, styles.confirmButton]}
                    onPress={handleSaveToVault}
                  >
                    <LinearGradient
                      colors={[colors.nautical.teal, colors.nautical.seafoam]}
                      style={styles.actionButtonGradient}
                    >
                      <Text style={styles.confirmButtonText}>Yes, Save</Text>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>

      {/* Save Result Modal */}
      <Modal
        visible={showSaveResultModal}
        transparent
        animationType="fade"
        onRequestClose={handleFinishSaveFlow}
      >
        <TouchableWithoutFeedback onPress={handleFinishSaveFlow}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
              <View style={[styles.modalContent, { paddingBottom: spacing.xl, alignItems: 'center' }]}>
                <View style={styles.modalHandle} />

                <View style={[
                  styles.resultIconContainer,
                  saveResult.success ? styles.successIconBg : styles.errorIconBg
                ]}>
                  <Ionicons
                    name={saveResult.success ? "checkmark-circle" : "alert-circle"}
                    size={64}
                    color={saveResult.success ? colors.nautical.teal : colors.nautical.coral}
                  />
                </View>

                <Text style={styles.modalTitle}>
                  {saveResult.success ? 'Success!' : 'Oops!'}
                </Text>

                <Text style={[styles.modalSubtitle, { marginVertical: spacing.base, textAlign: 'center' }]}>
                  {saveResult.message}
                </Text>

                <TouchableOpacity
                  style={[styles.actionButton, styles.confirmButton, { width: '100%' }]}
                  onPress={handleFinishSaveFlow}
                >
                  <LinearGradient
                    colors={[colors.nautical.teal, colors.nautical.seafoam]}
                    style={styles.actionButtonGradient}
                  >
                    <Text style={styles.confirmButtonText}>Confirm</Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>

      {/* Summary Loading Modal */}
      <Modal
        visible={isSummarizing}
        transparent
        animationType="fade"
      >
        <View style={styles.loadingOverlay}>
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={colors.nautical.teal} />
            <Text style={styles.loadingText}>Generating Summary...</Text>
          </View>
        </View>
      </Modal>
    </View>
  );
}

// =============================================================================
// Styles
// =============================================================================

const styles = StyleSheet.create({
  // Container styles
  container: {
    flex: 1
  },
  gradient: {
    flex: 1
  },
  safeArea: {
    flex: 1
  },

  // Header styles
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: spacing.base,
    paddingTop: spacing.sm,
    paddingBottom: spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(0,0,0,0.05)',
  },
  headerLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
    flex: 1,
  },
  headerRoleButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.flow.cardBackground,
    paddingHorizontal: spacing.sm,
    paddingVertical: 6,
    borderRadius: borderRadius.full,
    marginHorizontal: spacing.sm,
    borderWidth: 1,
    borderColor: colors.flow.cardBorder,
    maxWidth: '40%',
  },
  headerRoleText: {
    fontSize: typography.fontSize.xs,
    fontWeight: '600',
    color: colors.flow.text,
    marginHorizontal: 4,
  },
  iconCircle: {
    width: 44,
    height: 44,
    borderRadius: 14,
    backgroundColor: colors.flow.cardBackground,
    justifyContent: 'center',
    alignItems: 'center',
    ...shadows.soft,
  },
  headerTitle: {
    fontSize: typography.fontSize.xl,
    fontWeight: '700',
    color: colors.flow.text,
  },
  headerDate: {
    fontSize: typography.fontSize.sm,
    color: colors.flow.textSecondary,
  },
  historyButton: {
    width: 44,
    height: 44,
    borderRadius: 14,
    backgroundColor: colors.flow.cardBackground,
    justifyContent: 'center',
    alignItems: 'center',
    ...shadows.soft,
  },

  // Messages container styles
  messagesContainer: {
    flex: 1
  },
  messagesContent: {
    padding: spacing.base,
    paddingTop: 0
  },
  emptyContent: {
    flex: 1,
    justifyContent: 'center',
  },

  // Empty state styles
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.xxl,
  },
  emptyIcon: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: colors.flow.cardBackground,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: spacing.lg,
    ...shadows.soft,
  },
  emptyTitle: {
    fontSize: typography.fontSize.lg,
    fontWeight: '600',
    color: colors.flow.text,
    marginBottom: spacing.sm,
  },
  emptySubtitle: {
    fontSize: typography.fontSize.base,
    color: colors.flow.textSecondary,
    textAlign: 'center',
  },

  // Role selection styles
  roleDropdown: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.flow.cardBackground,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderRadius: borderRadius.lg,
    marginBottom: spacing.md,
    ...shadows.soft,
    borderWidth: 1,
    borderColor: colors.flow.cardBorder,
  },
  roleIcon: {
    marginRight: spacing.sm,
  },
  roleDropdownText: {
    fontSize: typography.fontSize.base,
    fontWeight: '600',
    color: colors.flow.text,
    marginRight: spacing.xs,
  },
  roleModalContent: {
    paddingBottom: spacing.xl,
  },
  roleList: {
    marginTop: spacing.sm,
    maxHeight: 400,
  },
  roleItemContainer: {
    marginBottom: spacing.sm,
  },
  roleItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: borderRadius.lg,
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: 'transparent',
    overflow: 'hidden',
  },
  roleItemActive: {
    backgroundColor: colors.nautical.paleAqua,
    borderColor: colors.nautical.lightMint,
  },
  roleSelectionArea: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    padding: spacing.md,
  },
  roleItemIcon: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: colors.flow.backgroundGradientStart,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.md,
  },
  roleItemIconActive: {
    backgroundColor: colors.nautical.teal,
  },
  roleItemName: {
    fontSize: typography.fontSize.base,
    fontWeight: '500',
    color: colors.flow.text,
  },
  roleItemNameActive: {
    fontWeight: '700',
    color: colors.nautical.teal,
  },
  infoButton: {
    padding: spacing.md,
    justifyContent: 'center',
    alignItems: 'center',
  },
  roleDescription: {
    paddingHorizontal: spacing.md + 36 + spacing.md, // icon width + margins
    paddingBottom: spacing.sm,
    paddingTop: 0,
  },
  roleDescriptionText: {
    fontSize: typography.fontSize.sm,
    color: colors.flow.textSecondary,
    fontStyle: 'italic',
    lineHeight: 18,
  },

  // Message bubble styles
  messageBubble: {
    flexDirection: 'row',
    marginBottom: spacing.md,
    alignItems: 'flex-end',
  },
  userBubble: {
    justifyContent: 'flex-end',
  },
  aiBubble: {
    justifyContent: 'flex-start',
  },
  aiAvatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: colors.flow.cardBackground,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.sm,
    ...shadows.soft,
  },
  messageContent: {
    maxWidth: '75%',
    borderRadius: borderRadius.xl,
    padding: spacing.md,
    ...shadows.soft,
  },
  userContent: {
    backgroundColor: colors.nautical.teal,
    borderBottomRightRadius: 4,
    marginLeft: 'auto',
  },
  aiContent: {
    backgroundColor: colors.flow.cardBackground,
    borderBottomLeftRadius: 4,
  },
  messageImage: {
    width: '100%',
    height: 200,
    borderRadius: borderRadius.lg,
    marginBottom: spacing.sm,
  },
  messageText: {
    fontSize: typography.fontSize.base,
    lineHeight: typography.fontSize.base * 1.5,
  },
  userText: {
    color: '#fff',
  },
  aiText: {
    color: colors.flow.text,
  },
  messageTime: {
    fontSize: typography.fontSize.xs,
    marginTop: spacing.xs,
    textAlign: 'right',
  },
  userMessageTime: {
    color: 'rgba(255, 255, 255, 0.7)',
  },
  aiMessageTime: {
    color: colors.flow.textSecondary,
  },

  // Input bar styles
  inputBarContainer: {
    paddingHorizontal: spacing.base,
    paddingBottom: spacing.lg,
    paddingTop: spacing.sm,
    backgroundColor: 'transparent',
  },
  inputBar: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    backgroundColor: colors.flow.cardBackground,
    borderRadius: borderRadius.xl,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    ...shadows.soft,
    gap: spacing.xs,
  },
  inputBarButton: {
    width: 40,
    height: 40,
    borderRadius: borderRadius.lg,
    justifyContent: 'center',
    alignItems: 'center',
  },
  recordingButton: {
    backgroundColor: colors.nautical.coral,
  },
  inputWrapper: {
    flex: 1,
    position: 'relative',
    justifyContent: 'center',
  },
  inputBarText: {
    fontSize: typography.fontSize.base,
    color: colors.flow.text,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.sm,
    maxHeight: 100,
    minHeight: 40,
  },
  sendButton: {
    width: 40,
    height: 40,
    borderRadius: borderRadius.lg,
    overflow: 'hidden',
  },
  sendButtonDisabled: {
    opacity: 0.7,
  },
  sendButtonGradient: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },

  // Modal styles
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(26, 58, 74, 0.4)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: colors.flow.cardBackground,
    borderTopLeftRadius: borderRadius.xxl,
    borderTopRightRadius: borderRadius.xxl,
    padding: spacing.lg,
    paddingBottom: spacing.xxl,
    maxHeight: '80%',
  },
  modalHandle: {
    width: 36,
    height: 4,
    backgroundColor: colors.flow.cardBorder,
    borderRadius: 2,
    alignSelf: 'center',
    marginBottom: spacing.md,
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: spacing.lg,
  },
  modalTitle: {
    fontSize: typography.fontSize.lg,
    fontWeight: '700',
    color: colors.flow.text,
  },
  newChatButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.nautical.teal,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderRadius: borderRadius.lg,
    gap: spacing.xs,
  },
  newChatText: {
    fontSize: typography.fontSize.sm,
    fontWeight: '600',
    color: '#fff',
  },

  // History list styles
  historyList: {
    flex: 1,
  },
  historyItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: colors.flow.cardBorder,
  },
  historyItemIcon: {
    width: 40,
    height: 40,
    borderRadius: borderRadius.lg,
    backgroundColor: colors.nautical.lightMint,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: spacing.md,
  },
  historyItemContent: {
    flex: 1,
  },
  historyItemTitle: {
    fontSize: typography.fontSize.base,
    fontWeight: '600',
    color: colors.flow.text,
    marginBottom: 2,
  },
  historyItemDate: {
    fontSize: typography.fontSize.sm,
    color: colors.flow.textSecondary,
  },
  historyEmpty: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: spacing.xxl,
  },
  historyEmptyText: {
    fontSize: typography.fontSize.base,
    color: colors.flow.textSecondary,
    marginTop: spacing.md,
  },
  closeButton: {
    paddingVertical: spacing.md,
    borderRadius: borderRadius.lg,
    backgroundColor: colors.nautical.paleAqua,
    alignItems: 'center',
    marginTop: spacing.md,
  },
  closeButtonText: {
    fontSize: typography.fontSize.base,
    color: colors.flow.textSecondary,
    fontWeight: '600',
  },

  // Summary Modal styles
  modalSubtitle: {
    fontSize: typography.fontSize.base,
    color: colors.flow.textSecondary,
    lineHeight: 22,
  },
  modalActions: {
    flexDirection: 'row',
    gap: spacing.md,
    marginTop: spacing.base,
  },
  actionButton: {
    flex: 1,
    height: 50,
    borderRadius: borderRadius.lg,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  actionButtonGradient: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cancelButton: {
    backgroundColor: colors.nautical.paleAqua,
  },
  confirmButton: {
    // Gradient handled in child
  },
  cancelButtonText: {
    fontSize: typography.fontSize.base,
    fontWeight: '600',
    color: colors.flow.textSecondary,
  },
  confirmButtonText: {
    fontSize: typography.fontSize.base,
    fontWeight: '600',
    color: '#fff',
  },
  summaryContainer: {
    marginVertical: spacing.md,
  },
  summaryCard: {
    backgroundColor: colors.nautical.paleAqua + '40', // 25% opacity
    padding: spacing.md,
    borderRadius: borderRadius.lg,
    borderWidth: 1,
    borderColor: colors.nautical.lightMint,
  },
  summaryText: {
    fontSize: typography.fontSize.base,
    color: colors.flow.text,
    lineHeight: 24,
  },
  summaryActions: {
    marginTop: spacing.md,
    gap: spacing.sm,
  },
  saveToVaultButton: {
    height: 54,
  },
  resultIconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: spacing.md,
  },
  successIconBg: {
    backgroundColor: colors.nautical.paleAqua,
  },
  errorIconBg: {
    backgroundColor: 'rgba(231, 76, 60, 0.1)', // coral at 10%
  },
  loadingOverlay: {
    flex: 1,
    backgroundColor: 'rgba(26, 58, 74, 0.6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingContainer: {
    backgroundColor: colors.flow.cardBackground,
    padding: spacing.xl,
    borderRadius: borderRadius.xl,
    alignItems: 'center',
    ...shadows.soft,
    gap: spacing.md,
  },
  loadingText: {
    fontSize: typography.fontSize.base,
    color: colors.flow.text,
    fontWeight: '600',
  },
});