import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  SafeAreaView,
  StatusBar,
  Platform,
  Dimensions
} from 'react-native';
import { toast, ToastPosition } from '@backpackapp-io/react-native-toast';
import { useNavigation } from '@react-navigation/native';
import { NavigationProp } from '@react-navigation/native';
import { MaterialIcons } from '@expo/vector-icons';
import { RootStackParamList } from '../navigation/AppNavigator';
import { useTheme } from '../contexts/ThemeContext';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import UpdateService from '../services/updateService';
import CustomAlert from '../components/CustomAlert';
import AsyncStorage from '@react-native-async-storage/async-storage';

const { width, height } = Dimensions.get('window');
const isTablet = width >= 768;

// Card component with minimalistic style
interface SettingsCardProps {
  children: React.ReactNode;
  title?: string;
  isTablet?: boolean;
}

const SettingsCard: React.FC<SettingsCardProps> = ({ children, title, isTablet = false }) => {
  const { currentTheme } = useTheme();
  
  return (
    <View 
      style={[
        styles.cardContainer,
        isTablet && styles.tabletCardContainer
      ]}
    >
      {title && (
        <Text style={[
          styles.cardTitle,
          { color: currentTheme.colors.mediumEmphasis },
          isTablet && styles.tabletCardTitle
        ]}>
          {title}
        </Text>
      )}
      <View style={[
        styles.card,
        { backgroundColor: currentTheme.colors.elevation1 },
        isTablet && styles.tabletCard
      ]}>
        {children}
      </View>
    </View>
  );
};

const UpdateScreen: React.FC = () => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const { currentTheme } = useTheme();
  const insets = useSafeAreaInsets();

  // CustomAlert state
  const [alertVisible, setAlertVisible] = useState(false);
  const [alertTitle, setAlertTitle] = useState('');
  const [alertMessage, setAlertMessage] = useState('');
  const [alertActions, setAlertActions] = useState<Array<{ label: string; onPress: () => void; style?: object }>>([
    { label: 'OK', onPress: () => setAlertVisible(false) },
  ]);

  const openAlert = (
    title: string,
    message: string,
    actions?: Array<{ label: string; onPress?: () => void; style?: object }>
  ) => {
    setAlertTitle(title);
    setAlertMessage(message);
    if (actions && actions.length > 0) {
      setAlertActions(
        actions.map(a => ({
          label: a.label,
          style: a.style,
          onPress: () => { a.onPress?.(); },
        }))
      );
    } else {
      setAlertActions([{ label: 'OK', onPress: () => setAlertVisible(false) }]);
    }
    setAlertVisible(true);
  };

  const [updateInfo, setUpdateInfo] = useState<any>(null);
  const [currentInfo, setCurrentInfo] = useState<any>(null);
  const [isChecking, setIsChecking] = useState(false);
  const [isInstalling, setIsInstalling] = useState(false);
  const [lastChecked, setLastChecked] = useState<Date | null>(null);
  // Logs removed
  const [lastOperation, setLastOperation] = useState<string>('');
  const [updateProgress, setUpdateProgress] = useState<number>(0);
  const [updateStatus, setUpdateStatus] = useState<'idle' | 'checking' | 'available' | 'downloading' | 'installing' | 'success' | 'error'>('idle');

  const checkForUpdates = async () => {
    try {
      setIsChecking(true);
      setUpdateStatus('checking');
      setUpdateProgress(0);
      setLastOperation('Checking for updates...');
      
      const info = await UpdateService.checkForUpdates();
      setUpdateInfo(info);
      setLastChecked(new Date());
      
      // Logs disabled
      
      if (info.isAvailable) {
        setUpdateStatus('available');
        setLastOperation(`Update available: ${info.manifest?.id || 'unknown'}`);
      } else {
        setUpdateStatus('idle');
        setLastOperation('No updates available');
      }
    } catch (error) {
      if (__DEV__) console.error('Error checking for updates:', error);
      setUpdateStatus('error');
      setLastOperation(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
  openAlert('Error', 'Failed to check for updates');
    } finally {
      setIsChecking(false);
    }
  };

  // Auto-check on mount and keep section visible
  useEffect(() => {
    if (Platform.OS === 'android') {
      // ensure badge clears when entering this screen
      (async () => {
        try { await AsyncStorage.removeItem('@update_badge_pending'); } catch {}
      })();
    }
    checkForUpdates();
    if (Platform.OS === 'android') {
      try {
        toast('Checking for updates…', { duration: 1200, position: ToastPosition.TOP });
      } catch {}
    }
  }, []);

  const installUpdate = async () => {
    try {
      setIsInstalling(true);
      setUpdateStatus('downloading');
      setUpdateProgress(0);
      setLastOperation('Downloading update...');
      
      // Simulate progress updates
      const progressInterval = setInterval(() => {
        setUpdateProgress(prev => {
          if (prev >= 90) return prev;
          return prev + Math.random() * 10;
        });
      }, 500);
      
      const success = await UpdateService.downloadAndInstallUpdate();
      
      clearInterval(progressInterval);
      setUpdateProgress(100);
      setUpdateStatus('installing');
      setLastOperation('Installing update...');
      
      // Logs disabled
      
      if (success) {
        setUpdateStatus('success');
        setLastOperation('Update installed successfully');
  openAlert('Success', 'Update will be applied on next app restart');
      } else {
        setUpdateStatus('error');
        setLastOperation('No update available to install');
  openAlert('No Update', 'No update available to install');
      }
    } catch (error) {
      if (__DEV__) console.error('Error installing update:', error);
      setUpdateStatus('error');
      setLastOperation(`Installation error: ${error instanceof Error ? error.message : 'Unknown error'}`);
  openAlert('Error', 'Failed to install update');
    } finally {
      setIsInstalling(false);
    }
  };

  const getCurrentUpdateInfo = async () => {
    const info = await UpdateService.getCurrentUpdateInfo();
    setCurrentInfo(info);
    // Logs disabled
  };

  // Extract release notes from various possible manifest fields
  const getReleaseNotes = () => {
    const manifest: any = updateInfo?.manifest || {};
    return (
      manifest.description ||
      manifest.releaseNotes ||
      manifest.extra?.releaseNotes ||
      manifest.metadata?.releaseNotes ||
      ''
    );
  };

  // Extract release notes for the currently running version
  const getCurrentReleaseNotes = () => {
    const manifest: any = currentInfo?.manifest || {};
    return (
      manifest.description ||
      manifest.releaseNotes ||
      manifest.extra?.releaseNotes ||
      manifest.metadata?.releaseNotes ||
      ''
    );
  };

  // Logs disabled: remove actions

  const testConnectivity = async () => {
    try {
      setLastOperation('Testing connectivity...');
      const isReachable = await UpdateService.testUpdateConnectivity();
      
      if (isReachable) {
        setLastOperation('Update server is reachable');
      } else {
        setLastOperation('Update server is not reachable');
      }
    } catch (error) {
      if (__DEV__) console.error('Error testing connectivity:', error);
      setLastOperation(`Connectivity test error: ${error instanceof Error ? error.message : 'Unknown error'}`);
      // Logs disabled
    }
  };

  const testAssetUrls = async () => {
    try {
      setLastOperation('Testing asset URLs...');
      await UpdateService.testAllAssetUrls();
      setLastOperation('Asset URL testing completed');
    } catch (error) {
      if (__DEV__) console.error('Error testing asset URLs:', error);
      setLastOperation(`Asset URL test error: ${error instanceof Error ? error.message : 'Unknown error'}`);
      // Logs disabled
    }
  };

  // Load current update info on mount
  useEffect(() => {
    const loadInitialData = async () => {
      await getCurrentUpdateInfo();
    };
    loadInitialData();
  }, []);

  const formatDate = (date: Date) => {
    return date.toLocaleString();
  };

  const getStatusIcon = () => {
    switch (updateStatus) {
      case 'checking':
        return <MaterialIcons name="refresh" size={20} color={currentTheme.colors.primary} />;
      case 'available':
        return <MaterialIcons name="new-releases" size={20} color={currentTheme.colors.success || '#4CAF50'} />;
      case 'downloading':
        return <MaterialIcons name="cloud-download" size={20} color={currentTheme.colors.primary} />;
      case 'installing':
        return <MaterialIcons name="install-mobile" size={20} color={currentTheme.colors.primary} />;
      case 'success':
        return <MaterialIcons name="check-circle" size={20} color={currentTheme.colors.success || '#4CAF50'} />;
      case 'error':
        return <MaterialIcons name="error" size={20} color={currentTheme.colors.error || '#ff4444'} />;
      default:
        return <MaterialIcons name="system-update" size={20} color={currentTheme.colors.mediumEmphasis} />;
    }
  };

  const getStatusText = () => {
    switch (updateStatus) {
      case 'checking':
        return 'Checking for updates...';
      case 'available':
        return 'Update available!';
      case 'downloading':
        return 'Downloading update...';
      case 'installing':
        return 'Installing update...';
      case 'success':
        return 'Update installed successfully!';
      case 'error':
        return 'Update failed';
      default:
        return 'Ready to check for updates';
    }
  };

  const getStatusColor = () => {
    switch (updateStatus) {
      case 'available':
      case 'success':
        return currentTheme.colors.success || '#4CAF50';
      case 'error':
        return currentTheme.colors.error || '#ff4444';
      case 'checking':
      case 'downloading':
      case 'installing':
        return currentTheme.colors.primary;
      default:
        return currentTheme.colors.mediumEmphasis;
    }
  };


  return (
    <SafeAreaView style={[
      styles.container,
      { backgroundColor: currentTheme.colors.darkBackground }
    ]}>
      <StatusBar barStyle="light-content" />
      
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
          activeOpacity={0.7}
        >
          <MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.highEmphasis} />
          <Text style={[styles.backText, { color: currentTheme.colors.highEmphasis }]}>
            Settings
          </Text>
        </TouchableOpacity>
        
        <View style={styles.headerActions}>
          {/* Empty for now, but ready for future actions */}
        </View>
      </View>
      
      <Text style={[styles.headerTitle, { color: currentTheme.colors.text }]}>
        App Updates
      </Text>

        <View style={styles.contentContainer}>
          <ScrollView 
            style={styles.scrollView}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.scrollContent}
          >
            <SettingsCard title="APP UPDATES" isTablet={isTablet}>
              {/* Main Update Card */}
              <View style={styles.updateMainCard}>
                {/* Status Section */}
                <View style={styles.updateStatusSection}>
                  <View style={[styles.statusIndicator, { backgroundColor: `${getStatusColor()}20` }]}>
                    {getStatusIcon()}
                  </View>
                  <View style={styles.statusContent}>
                    <Text style={[styles.statusMainText, { color: currentTheme.colors.highEmphasis }]}>
                      {getStatusText()}
                    </Text>
                    <Text style={[styles.statusDetailText, { color: currentTheme.colors.mediumEmphasis }]}>
                      {lastOperation || 'Ready to check for updates'}
                    </Text>
                  </View>
                </View>

                {/* Progress Section */}
                {(updateStatus === 'downloading' || updateStatus === 'installing') && (
                  <View style={styles.progressSection}>
                    <View style={styles.progressHeader}>
                      <Text style={[styles.progressLabel, { color: currentTheme.colors.mediumEmphasis }]}>
                        {updateStatus === 'downloading' ? 'Downloading' : 'Installing'}
                      </Text>
                      <Text style={[styles.progressPercentage, { color: currentTheme.colors.primary }]}>
                        {Math.round(updateProgress)}%
                      </Text>
                    </View>
                    <View style={[styles.modernProgressBar, { backgroundColor: `${currentTheme.colors.primary}15` }]}>
                      <View 
                        style={[
                          styles.modernProgressFill, 
                          { 
                            backgroundColor: currentTheme.colors.primary,
                            width: `${updateProgress}%`
                          }
                        ]} 
                      />
                    </View>
                  </View>
                )}

                {/* Action Section */}
                <View style={styles.actionSection}>
                  <TouchableOpacity
                    style={[
                      styles.modernButton,
                      styles.primaryAction,
                      { backgroundColor: currentTheme.colors.primary },
                      (isChecking || isInstalling) && styles.disabledAction
                    ]}
                    onPress={checkForUpdates}
                    disabled={isChecking || isInstalling}
                    activeOpacity={0.8}
                  >
                    {isChecking ? (
                      <MaterialIcons name="refresh" size={18} color="white" />
                    ) : (
                      <MaterialIcons name="system-update" size={18} color="white" />
                    )}
                    <Text style={styles.modernButtonText}>
                      {isChecking ? 'Checking...' : 'Check for Updates'}
                    </Text>
                  </TouchableOpacity>

                  {updateInfo?.isAvailable && updateStatus !== 'success' && (
                    <TouchableOpacity
                      style={[
                        styles.modernButton,
                        styles.installAction,
                        { backgroundColor: currentTheme.colors.success || '#34C759' },
                        (isInstalling) && styles.disabledAction
                      ]}
                      onPress={installUpdate}
                      disabled={isInstalling}
                      activeOpacity={0.8}
                    >
                      {isInstalling ? (
                        <MaterialIcons name="install-mobile" size={18} color="white" />
                      ) : (
                        <MaterialIcons name="download" size={18} color="white" />
                      )}
                      <Text style={styles.modernButtonText}>
                        {isInstalling ? 'Installing...' : 'Install Update'}
                      </Text>
                    </TouchableOpacity>
                  )}

                </View>
              </View>

              {/* Release Notes */}
              {updateInfo?.isAvailable && !!getReleaseNotes() && (
                <View style={styles.infoSection}>
                  <View style={styles.infoItem}>
                    <View style={[styles.infoIcon, { backgroundColor: `${currentTheme.colors.primary}15` }]}>
                      <MaterialIcons name="notes" size={14} color={currentTheme.colors.primary} />
                    </View>
                    <Text style={[styles.infoLabel, { color: currentTheme.colors.mediumEmphasis }]}>Release notes:</Text>
                  </View>
                  <Text style={[styles.infoValue, { color: currentTheme.colors.highEmphasis }]}>{getReleaseNotes()}</Text>
                </View>
              )}

              {/* Info Section */}
              <View style={styles.infoSection}>
                <View style={styles.infoItem}>
                  <View style={[styles.infoIcon, { backgroundColor: `${currentTheme.colors.primary}15` }]}>
                    <MaterialIcons name="info-outline" size={14} color={currentTheme.colors.primary} />
                  </View>
                  <Text style={[styles.infoLabel, { color: currentTheme.colors.mediumEmphasis }]}>Version:</Text>
                  <Text style={[styles.infoValue, { color: currentTheme.colors.highEmphasis }]}>
                    {updateInfo?.manifest?.id ? `${updateInfo.manifest.id.substring(0, 8)}...` : 'Unknown'}
                  </Text>
                </View>
                
                {lastChecked && (
                  <View style={styles.infoItem}>
                    <View style={[styles.infoIcon, { backgroundColor: `${currentTheme.colors.primary}15` }]}>
                      <MaterialIcons name="schedule" size={14} color={currentTheme.colors.primary} />
                    </View>
                    <Text style={[styles.infoLabel, { color: currentTheme.colors.mediumEmphasis }]}>Last checked:</Text>
                    <Text style={[styles.infoValue, { color: currentTheme.colors.highEmphasis }]}>
                      {formatDate(lastChecked)}
                    </Text>
                  </View>
                )}
              </View>

              {/* Current Version Section */}
              <View style={styles.infoSection}>
                <View style={styles.infoItem}>
                  <View style={[styles.infoIcon, { backgroundColor: `${currentTheme.colors.primary}15` }]}>
                    <MaterialIcons name="verified" size={14} color={currentTheme.colors.primary} />
                  </View>
                  <Text style={[styles.infoLabel, { color: currentTheme.colors.mediumEmphasis }]}>Current version:</Text>
                  <Text style={[styles.infoValue, { color: currentTheme.colors.highEmphasis }]}
                    selectable>
                    {currentInfo?.manifest?.id || (currentInfo?.isEmbeddedLaunch === false ? 'Unknown' : 'Embedded')}
                  </Text>
                </View>

                {!!getCurrentReleaseNotes() && (
                  <View style={{ marginTop: 8 }}>
                    <View style={[styles.infoItem, { alignItems: 'flex-start' }]}>
                      <View style={[styles.infoIcon, { backgroundColor: `${currentTheme.colors.primary}15` }]}>
                        <MaterialIcons name="notes" size={14} color={currentTheme.colors.primary} />
                      </View>
                      <Text style={[styles.infoLabel, { color: currentTheme.colors.mediumEmphasis }]}>Current release notes:</Text>
                    </View>
                    <Text style={[styles.infoValue, { color: currentTheme.colors.highEmphasis }]}>
                      {getCurrentReleaseNotes()}
                    </Text>
                  </View>
                )}
              </View>

              {/* Developer Logs removed */}
            </SettingsCard>

            {false && (
              <SettingsCard title="UPDATE LOGS" isTablet={isTablet}>
                <View style={styles.logsContainer}>
                  <View style={styles.logsHeader}>
                    <Text style={[styles.logsHeaderText, { color: currentTheme.colors.highEmphasis }]}>
                      Update Service Logs
                    </Text>
                    <View style={styles.logsActions}>
                      <TouchableOpacity
                        style={[styles.logActionButton, { backgroundColor: currentTheme.colors.elevation2 }]}
                        onPress={testConnectivity}
                        activeOpacity={0.7}
                      >
                        <MaterialIcons name="wifi" size={16} color={currentTheme.colors.primary} />
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={[styles.logActionButton, { backgroundColor: currentTheme.colors.elevation2 }]}
                        onPress={testAssetUrls}
                        activeOpacity={0.7}
                      >
                        <MaterialIcons name="link" size={16} color={currentTheme.colors.primary} />
                      </TouchableOpacity>
                      {/* Test log removed */}
                      {/* Copy all logs removed */}
                      {/* Refresh logs removed */}
                      {/* Clear logs removed */}
                    </View>
                  </View>
                  
                  <ScrollView 
                    style={[styles.logsScrollView, { backgroundColor: currentTheme.colors.elevation2 }]}
                    showsVerticalScrollIndicator={true}
                    nestedScrollEnabled={true}
                  >
                    {false ? (
                      <Text style={[styles.noLogsText, { color: currentTheme.colors.mediumEmphasis }]}>No logs available</Text>
                    ) : (
                      ([] as string[]).map((log, index) => {
                        const isError = log.indexOf('[ERROR]') !== -1;
                        const isWarning = log.indexOf('[WARN]') !== -1;
                        
                        return (
                          <TouchableOpacity 
                            key={index} 
                            style={[
                              styles.logEntry,
                              { backgroundColor: 'rgba(255,255,255,0.05)' }
                            ]}
                            onPress={() => {}}
                            activeOpacity={0.7}
                          >
                            <View style={styles.logEntryContent}>
                              <Text style={[
                                styles.logText,
                                { 
                                  color: isError 
                                    ? (currentTheme.colors.error || '#ff4444')
                                    : isWarning 
                                    ? (currentTheme.colors.warning || '#ffaa00')
                                    : currentTheme.colors.mediumEmphasis 
                                }
                              ]}>
                                {log}
                              </Text>
                              <MaterialIcons 
                                name="content-copy" 
                                size={14} 
                                color={currentTheme.colors.mediumEmphasis}
                                style={styles.logCopyIcon}
                              />
                            </View>
                          </TouchableOpacity>
                        );
                      })
                    )}
                  </ScrollView>
                </View>
              </SettingsCard>
            )}
          </ScrollView>
        </View>
      <CustomAlert
        visible={alertVisible}
        title={alertTitle}
        message={alertMessage}
        onClose={() => setAlertVisible(false)}
        actions={alertActions}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 8 : 8,
  },
  backButton: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8,
  },
  backText: {
    fontSize: 17,
    marginLeft: 8,
  },
  headerActions: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerButton: {
    padding: 8,
    marginLeft: 8,
  },
  headerTitle: {
    fontSize: 34,
    fontWeight: 'bold',
    paddingHorizontal: 16,
    marginBottom: 24,
  },
  contentContainer: {
    flex: 1,
    zIndex: 1,
    width: '100%',
  },
  scrollView: {
    flex: 1,
    width: '100%',
  },
  scrollContent: {
    flexGrow: 1,
    width: '100%',
    paddingBottom: 90,
  },
  
  // Common card styles
  cardContainer: {
    width: '100%',
    marginBottom: 20,
  },
  tabletCardContainer: {
    marginBottom: 32,
  },
  cardTitle: {
    fontSize: 13,
    fontWeight: '600',
    letterSpacing: 0.8,
    marginLeft: Math.max(12, width * 0.04),
    marginBottom: 8,
  },
  tabletCardTitle: {
    fontSize: 14,
    marginLeft: 0,
    marginBottom: 12,
  },
  card: {
    marginHorizontal: Math.max(12, width * 0.04),
    borderRadius: 16,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    width: undefined,
  },
  tabletCard: {
    marginHorizontal: 0,
    borderRadius: 20,
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 5,
  },
  
  // Update UI Styles
  updateMainCard: {
    padding: 20,
    marginBottom: 16,
  },
  updateStatusSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  statusIndicator: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
  },
  statusContent: {
    flex: 1,
  },
  statusMainText: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 4,
    letterSpacing: 0.2,
  },
  statusDetailText: {
    fontSize: 14,
    opacity: 0.8,
    lineHeight: 20,
  },
  progressSection: {
    marginBottom: 20,
  },
  progressHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  progressLabel: {
    fontSize: 14,
    fontWeight: '500',
  },
  progressPercentage: {
    fontSize: 14,
    fontWeight: '600',
  },
  modernProgressBar: {
    height: 8,
    borderRadius: 4,
    overflow: 'hidden',
  },
  modernProgressFill: {
     height: '100%',
     borderRadius: 4,
   },
  actionSection: {
    gap: 12,
  },
  modernButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 14,
    paddingHorizontal: 20,
    borderRadius: 12,
    gap: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  primaryAction: {
    marginBottom: 8,
  },
  installAction: {
    // Additional styles for install button
  },
  disabledAction: {
    opacity: 0.6,
  },
  modernButtonText: {
    color: 'white',
    fontSize: 15,
    fontWeight: '600',
    letterSpacing: 0.3,
  },
  infoSection: {
    paddingHorizontal: 20,
    paddingVertical: 16,
    gap: 12,
  },
  infoItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  infoIcon: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  infoLabel: {
    fontSize: 14,
    fontWeight: '500',
    minWidth: 80,
  },
  infoValue: {
    fontSize: 14,
    fontWeight: '400',
    flex: 1,
  },
  modernAdvancedToggle: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 16,
    paddingHorizontal: 20,
    marginTop: 8,
    borderRadius: 12,
    marginHorizontal: 4,
  },
  advancedToggleLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  advancedToggleLabel: {
    fontSize: 15,
    fontWeight: '500',
    letterSpacing: 0.2,
  },
  logsBadge: {
    minWidth: 20,
    height: 20,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 6,
  },
  logsBadgeText: {
    color: 'white',
    fontSize: 11,
    fontWeight: '600',
  },
  
  // Logs styles
  logsContainer: {
    padding: 20,
  },
  logsHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  logsHeaderText: {
    fontSize: 16,
    fontWeight: '600',
  },
  logsActions: {
    flexDirection: 'row',
    gap: 8,
  },
  logActionButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logsScrollView: {
    maxHeight: 200,
    borderRadius: 8,
    padding: 12,
  },
  logEntry: {
    marginBottom: 4,
    paddingVertical: 4,
    paddingHorizontal: 8,
    borderRadius: 4,
  },
  logEntryContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  logText: {
    fontSize: 12,
    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
    lineHeight: 16,
    flex: 1,
    marginRight: 8,
  },
  logCopyIcon: {
    opacity: 0.6,
  },
  noLogsText: {
    fontSize: 14,
    textAlign: 'center',
    paddingVertical: 20,
  },
});

export default UpdateScreen;