import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Alert
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native';
import * as FileSystem from 'expo-file-system/legacy';
import Share from 'react-native-share';
import { Header, Input, PageWrapper } from 'src/components';
import { Colors } from 'src/theme';
import { getFontSize } from 'src/utils';
import {
  getTelemetryEvents,
  clearTelemetryEvents,
  getAmbientCacheSize,
  sanitizeUrlForDisplay,
  APP_OPEN_TIME,
  TelemetryEvent
} from 'src/utils/telemetry';
import { FlashList } from '@shopify/flash-list';

const formatBytes = (bytes: number, decimals = 2) => {
  if (!bytes || bytes === 0) return '0 Bytes';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

interface GroupedTelemetry {
  urlKey: string;
  method: string;
  caller: string;
  count: number;
  totalSize: number;
  avgDuration: number;
  type: string;
  status: number;
}

export default function DataReportScreen() {
  const [events, setEvents] = useState<TelemetryEvent[]>([]);
  const [ambientCacheSize, setAmbientCacheSize] = useState(0);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeTab, setActiveTab] = useState<'all' | 'api_request' | 'file_download'>('all');
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<'grouped' | 'detailed'>('grouped');
  const [timeRange, setTimeRange] = useState<'app_open' | 'hour' | 'day' | 'week'>('app_open');
  const [expandedModules, setExpandedModules] = useState<Record<string, boolean>>({});

  const loadData = useCallback(() => {
    const allEvents = getTelemetryEvents();
    setEvents(allEvents);
    getAmbientCacheSize().then((size) => setAmbientCacheSize(size));
  }, []);

  useFocusEffect(
    useCallback(() => {
      loadData();
    }, [loadData])
  );

  useEffect(() => {
    const timer = setInterval(() => {
      loadData();
    }, 3000);
    return () => clearInterval(timer);
  }, [loadData]);

  const handleClear = () => {
    Alert.alert(
      'Clear Logs',
      'This will delete all recorded traffic logs. Proceed?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Clear',
          style: 'destructive',
          onPress: () => {
            clearTelemetryEvents();
            loadData();
          }
        }
      ]
    );
  };

  const handleExportCSV = async () => {
    if (events.length === 0) {
      Alert.alert('No Logs', 'There are no logs to export.');
      return;
    }
    
    let csv = 'Timestamp,Type,Caller,Method,URL,ReqSize,ResSize,Status,DurationMs\n';
    events.forEach((e) => {
      const timeStr = new Date(e.timestamp).toISOString();
      const urlEscaped = e.url.replace(/"/g, '""');
      csv += `"${timeStr}","${e.type}","${e.caller}","${e.method || ''}","${urlEscaped}",${e.reqSize},${e.resSize},${e.status},${e.duration}\n`;
    });

    try {
      const filename = `nomadmania_traffic_report_${Date.now()}.csv`;
      const fileUri = `${FileSystem.cacheDirectory}${filename}`;
      
      await FileSystem.writeAsStringAsync(fileUri, csv, {
        encoding: FileSystem.EncodingType.UTF8
      });
      
      await Share.open({
        url: fileUri,
        type: 'text/csv',
        filename: 'nomadmania_traffic_report',
        title: 'Share CSV Traffic Report'
      });
    } catch (error: any) {
      if (error && error.message && error.message.includes('User cancelled')) {
        return;
      }
      console.error('Failed to export CSV file:', error);
    }
  };

  const toggleExpand = (id: string) => {
    setExpandedId(expandedId === id ? null : id);
  };

  const toggleModuleExpand = (moduleName: string) => {
    setExpandedModules((prev) => ({
      ...prev,
      [moduleName]: !prev[moduleName]
    }));
  };

  const timeFilteredEvents = useMemo(() => {
    let cutoff = 0;
    if (timeRange === 'app_open') {
      cutoff = APP_OPEN_TIME;
    } else if (timeRange === 'hour') {
      cutoff = Date.now() - 3600 * 1000;
    } else if (timeRange === 'day') {
      cutoff = Date.now() - 24 * 3600 * 1000;
    } else {
      cutoff = 0; 
    }
    return events.filter((e) => e.timestamp >= cutoff);
  }, [events, timeRange]);

  const dynamicSummary = useMemo(() => {
    let totalDownloaded = 0;
    let totalUploaded = 0;
    const callerBreakdown: Record<string, { count: number; downloaded: number }> = {};

    timeFilteredEvents.forEach((event) => {
      totalDownloaded += event.resSize;
      totalUploaded += event.reqSize;

      const caller = event.caller || 'Other';
      if (!callerBreakdown[caller]) {
        callerBreakdown[caller] = { count: 0, downloaded: 0 };
      }
      callerBreakdown[caller].count += 1;
      callerBreakdown[caller].downloaded += event.resSize;
    });

    const breakdown = Object.entries(callerBreakdown)
      .map(([name, data]) => ({
        name,
        count: data.count,
        downloaded: data.downloaded
      }))
      .sort((a, b) => b.downloaded - a.downloaded);

    return {
      totalDownloaded,
      totalUploaded,
      totalEvents: timeFilteredEvents.length,
      callerBreakdown: breakdown
    };
  }, [timeFilteredEvents]);

  const filteredEvents = useMemo(() => {
    return timeFilteredEvents.filter((e) => {
      const matchesTab = activeTab === 'all' || e.type === activeTab;
      const matchesSearch =
        e.url.toLowerCase().includes(searchQuery.toLowerCase()) ||
        e.caller.toLowerCase().includes(searchQuery.toLowerCase());
      return matchesTab && matchesSearch;
    });
  }, [timeFilteredEvents, activeTab, searchQuery]);

  const groupedEvents = useMemo(() => {
    const groups: Record<string, GroupedTelemetry> = {};
    
    filteredEvents.forEach((e) => {
      const displayUrl = sanitizeUrlForDisplay(e.url);
      const key = `${e.method || ''}:${displayUrl}`;
      
      if (!groups[key]) {
        groups[key] = {
          urlKey: displayUrl,
          method: e.method || 'GET',
          caller: e.caller,
          count: 0,
          totalSize: 0,
          avgDuration: 0,
          type: e.type,
          status: e.status
        };
      }
      
      const g = groups[key];
      g.count += 1;
      g.totalSize += (e.resSize + e.reqSize);
      g.avgDuration += e.duration;
      g.status = e.status;
    });
    
    return Object.values(groups).map((g) => ({
      ...g,
      avgDuration: Math.round(g.avgDuration / g.count)
    })).sort((a, b) => b.totalSize - a.totalSize);
  }, [filteredEvents]);

  const modulesBreakdown = useMemo(() => {
    const groups: Record<string, { name: string; totalSize: number; count: number; items: GroupedTelemetry[] }> = {};
    
    groupedEvents.forEach((item) => {
      const moduleName = item.caller;
      if (!groups[moduleName]) {
        groups[moduleName] = {
          name: moduleName,
          totalSize: 0,
          count: 0,
          items: []
        };
      }
      const g = groups[moduleName];
      g.totalSize += item.totalSize;
      g.count += item.count;
      g.items.push(item);
    });
    
    return Object.values(groups).sort((a, b) => b.totalSize - a.totalSize);
  }, [groupedEvents]);

  const renderEventItem = ({ item }: { item: TelemetryEvent }) => {
    const isExpanded = expandedId === item.id;
    const dateStr = new Date(item.timestamp).toLocaleTimeString();
    const totalSize = item.resSize + item.reqSize;
    const isError = item.status >= 400 || item.status === 0;

    return (
      <TouchableOpacity
        style={[styles.eventCard, isExpanded && styles.eventCardExpanded]}
        onPress={() => toggleExpand(item.id)}
        activeOpacity={0.7}
      >
        <View style={styles.eventHeader}>
          <View style={styles.eventLeft}>
            <View
              style={[
                styles.typeBadge,
                item.type === 'file_download' ? styles.badgeDownload : styles.badgeApi
              ]}
            >
              <Text style={styles.typeBadgeText}>
                {item.type === 'file_download' ? 'FILE' : 'API'}
              </Text>
            </View>
            <View style={styles.eventTitleContainer}>
              <Text style={styles.eventCaller} numberOfLines={1}>
                {item.caller}
              </Text>
              <Text style={styles.eventUrlShort} numberOfLines={1}>
                {item.url.split('/').pop() || item.url}
              </Text>
            </View>
          </View>
          <View style={styles.eventRight}>
            <Text style={styles.eventSize}>{formatBytes(totalSize)}</Text>
            <Text style={styles.eventTime}>{dateStr}</Text>
          </View>
        </View>

        {isExpanded && (
          <View style={styles.expandedContent}>
            <View style={styles.divider} />
            <Text style={styles.detailLabel}>Full URL / Path:</Text>
            <Text style={styles.detailValueSelectable} selectable>
              {item.url}
            </Text>

            <View style={styles.detailGrid}>
              <View style={styles.gridItem}>
                <Text style={styles.detailLabel}>Method:</Text>
                <Text style={styles.detailValue}>{item.method || 'GET'}</Text>
              </View>
              <View style={styles.gridItem}>
                <Text style={styles.detailLabel}>Status:</Text>
                <Text style={[styles.detailValue, isError ? styles.textRed : styles.textGreen]}>
                  {item.status}
                </Text>
              </View>
              <View style={styles.gridItem}>
                <Text style={styles.detailLabel}>Duration:</Text>
                <Text style={styles.detailValue}>{item.duration}ms</Text>
              </View>
            </View>

            <View style={styles.detailGrid}>
              <View style={styles.gridItem}>
                <Text style={styles.detailLabel}>Upload size:</Text>
                <Text style={styles.detailValue}>{formatBytes(item.reqSize)}</Text>
              </View>
              <View style={styles.gridItem}>
                <Text style={styles.detailLabel}>Download size:</Text>
                <Text style={styles.detailValue}>{formatBytes(item.resSize)}</Text>
              </View>
              <View style={styles.gridItem}>
                <Text style={styles.detailLabel}>Timestamp:</Text>
                <Text style={styles.detailValue}>
                  {new Date(item.timestamp).toLocaleString()}
                </Text>
              </View>
            </View>
          </View>
        )}
      </TouchableOpacity>
    );
  };

  const renderModuleItem = ({ item }: { item: any }) => {
    const isExpanded = !!expandedModules[item.name];
    const totalSize = item.totalSize;

    return (
      <View style={styles.moduleWrapper}>
        <TouchableOpacity
          style={[styles.moduleHeader, isExpanded && styles.moduleHeaderExpanded]}
          onPress={() => toggleModuleExpand(item.name)}
          activeOpacity={0.7}
        >
          <View style={styles.moduleHeaderLeft}>
            <Ionicons
              name={isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline'}
              size={18}
              color={Colors.DARK_BLUE}
              style={{ marginRight: 8 }}
            />
            <Text style={styles.moduleName} numberOfLines={1}>{item.name}</Text>
            <View style={styles.countBadge}>
              <Text style={styles.countBadgeText}>{item.count}</Text>
            </View>
          </View>
          <Text style={styles.moduleSize}>{formatBytes(totalSize)}</Text>
        </TouchableOpacity>

        {isExpanded && (
          <View style={styles.moduleItemsContainer}>
            {item.items.map((subItem: GroupedTelemetry, index: number) => {
              const isError = subItem.status >= 400 || subItem.status === 0;
              return (
                <View key={index} style={styles.subItemCard}>
                  <View style={styles.subItemHeader}>
                    <View style={{ flex: 1, marginRight: 8 }}>
                      <Text style={styles.subItemUrl} numberOfLines={2}>
                        {subItem.method} {subItem.urlKey}
                      </Text>
                    </View>
                    <View style={{ alignItems: 'flex-end' }}>
                      <Text style={styles.subItemSize}>{formatBytes(subItem.totalSize)}</Text>
                      <Text style={styles.subItemCount}>x{subItem.count}</Text>
                    </View>
                  </View>
                  <View style={styles.subItemFooter}>
                    <Text style={[styles.subItemStatus, isError ? styles.textRed : styles.textGreen]}>
                      Status: {subItem.status}
                    </Text>
                    <Text style={styles.subItemDuration}>
                      avg {subItem.avgDuration}ms
                    </Text>
                  </View>
                </View>
              );
            })}
          </View>
        )}
      </View>
    );
  };

  const renderHeader = () => {
    return (
      <View style={styles.headerContainer}>
        <View style={styles.summaryContainer}>
          <View style={styles.summaryRow}>
            <View style={styles.summaryCard}>
              <Ionicons name="cloud-download-outline" size={20} color={Colors.ORANGE} />
              <Text style={styles.summaryValue}>
                {formatBytes(dynamicSummary.totalDownloaded)}
              </Text>
              <Text style={styles.summaryLabel}>Downloaded</Text>
            </View>
            
            <View style={styles.summaryCard}>
              <Ionicons name="swap-vertical-outline" size={20} color={Colors.DARK_BLUE} />
              <Text style={styles.summaryValue}>{dynamicSummary.totalEvents}</Text>
              <Text style={styles.summaryLabel}>Requests</Text>
            </View>

            <View style={styles.summaryCard}>
              <Ionicons name="map-outline" size={20} color="#28A745" />
              <Text style={styles.summaryValue}>
                {formatBytes(ambientCacheSize)}
              </Text>
              <Text style={styles.summaryLabel}>Map Cache</Text>
            </View>
          </View>

          {dynamicSummary?.callerBreakdown?.length > 0 && (
            <View style={styles.breakdownContainer}>
              <Text style={styles.sectionTitle}>Breakdown by Module</Text>
              {dynamicSummary.callerBreakdown.slice(0, 5).map((callerItem: any, index: number) => {
                const percentage = dynamicSummary.totalDownloaded > 0 
                  ? (callerItem.downloaded / dynamicSummary.totalDownloaded) * 100 
                  : 0;
                return (
                  <View key={callerItem.name} style={styles.breakdownRow}>
                    <View style={styles.breakdownTextRow}>
                      <Text style={styles.breakdownName} numberOfLines={1}>{callerItem.name}</Text>
                      <Text style={styles.breakdownValue}>
                        {formatBytes(callerItem.downloaded)} ({Math.round(percentage)}%)
                      </Text>
                    </View>
                    <View style={styles.progressBarBg}>
                      <View 
                        style={[
                          styles.progressBarFill, 
                          { width: `${percentage}%`, backgroundColor: index === 0 ? Colors.ORANGE : Colors.DARK_BLUE }
                        ]} 
                      />
                    </View>
                  </View>
                );
              })}
            </View>
          )}
        </View>

        <View style={styles.timeRangeContainer}>
          <Text style={styles.timeRangeLabel}>Report Period:</Text>
          <View style={styles.timeRangeButtons}>
            {(
              [
                { label: 'Session', value: 'app_open' },
                { label: '1 Hour', value: 'hour' },
                { label: '24 Hours', value: 'day' },
                { label: '7 Days', value: 'week' }
              ] as const
            ).map((opt) => (
              <TouchableOpacity
                key={opt.value}
                style={[styles.timeBtn, timeRange === opt.value && styles.timeBtnActive]}
                onPress={() => setTimeRange(opt.value)}
              >
                <Text style={[styles.timeBtnText, timeRange === opt.value && styles.timeBtnTextActive]}>
                  {opt.label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        <View style={styles.actionRow}>
          <TouchableOpacity style={[styles.actionBtn, styles.btnOutline]} onPress={handleExportCSV}>
            <Ionicons name="share-outline" size={16} color={Colors.DARK_BLUE} style={{ marginRight: 6 }} />
            <Text style={styles.btnOutlineText}>Share CSV</Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.actionBtn, styles.btnDestructive]} onPress={handleClear}>
            <Ionicons name="trash-outline" size={16} color={Colors.WHITE} style={{ marginRight: 6 }} />
            <Text style={styles.btnDestructiveText}>Clear Logs</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.modeContainer}>
          <TouchableOpacity
            style={[styles.modeButton, viewMode === 'grouped' && styles.modeActive]}
            onPress={() => setViewMode('grouped')}
          >
            <Text style={[styles.modeText, viewMode === 'grouped' && styles.modeTextActive]}>Grouped View</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.modeButton, viewMode === 'detailed' && styles.modeActive]}
            onPress={() => setViewMode('detailed')}
          >
            <Text style={[styles.modeText, viewMode === 'detailed' && styles.modeTextActive]}>Detailed Logs</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.tabContainer}>
          <TouchableOpacity
            style={[styles.tabButton, activeTab === 'all' && styles.tabActive]}
            onPress={() => setActiveTab('all')}
          >
            <Text style={[styles.tabText, activeTab === 'all' && styles.tabTextActive]}>All</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.tabButton, activeTab === 'api_request' && styles.tabActive]}
            onPress={() => setActiveTab('api_request')}
          >
            <Text style={[styles.tabText, activeTab === 'api_request' && styles.tabTextActive]}>APIs</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.tabButton, activeTab === 'file_download' && styles.tabActive]}
            onPress={() => setActiveTab('file_download')}
          >
            <Text style={[styles.tabText, activeTab === 'file_download' && styles.tabTextActive]}>Downloads</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.searchContainer}>
          <Input
            value={searchQuery}
            onChange={setSearchQuery}
            placeholder="Search by URL or module..."
            inputMode="text"
          />
        </View>
      </View>
    );
  };

  return (
    <PageWrapper style={styles.wrapperStyle}>
      <Header label="Data Traffic Report" />
      
      <FlashList
        estimatedItemSize={50}
        style={styles.flexOne}
        data={viewMode === 'grouped' ? modulesBreakdown : filteredEvents}
        renderItem={viewMode === 'grouped' ? renderModuleItem : renderEventItem}
        keyExtractor={(item) => viewMode === 'grouped' ? (item as any).name : (item as TelemetryEvent).id}
        ListHeaderComponent={renderHeader}
        contentContainerStyle={styles.listContainer}
        ListEmptyComponent={
          <View style={styles.emptyContainer}>
            <Ionicons name="bar-chart-outline" size={40} color={Colors.LIGHT_GRAY} />
            <Text style={styles.emptyText}>No data traffic recorded yet</Text>
            <Text style={styles.emptySubText}>
              Any API calls or database downloads will show up here in real-time.
            </Text>
          </View>
        }
      />
    </PageWrapper>
  );
}

const styles = StyleSheet.create({
  flexOne: {
    flex: 1
  },
  wrapperStyle: {
    flex: 1,
  },
  headerContainer: {
    paddingHorizontal: 2
  },
  summaryContainer: {
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8,
    padding: 16,
    marginBottom: 12
  },
  summaryRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 10
  },
  summaryCard: {
    flex: 1,
    backgroundColor: Colors.WHITE,
    borderRadius: 6,
    padding: 10,
    alignItems: 'center',
    borderColor: '#eef2f3',
    borderWidth: 1
  },
  summaryValue: {
    fontSize: getFontSize(13),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE,
    marginTop: 4
  },
  summaryLabel: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    marginTop: 2
  },
  breakdownContainer: {
    marginTop: 16,
    borderTopWidth: 1,
    borderTopColor: 'rgba(0, 0, 0, 0.05)',
    paddingTop: 12
  },
  sectionTitle: {
    fontSize: getFontSize(12),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE,
    marginBottom: 10
  },
  breakdownRow: {
    marginBottom: 8
  },
  breakdownTextRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 4
  },
  breakdownName: {
    fontSize: getFontSize(11),
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    flex: 1,
    marginRight: 8
  },
  breakdownValue: {
    fontSize: getFontSize(11),
    color: Colors.TEXT_GRAY
  },
  progressBarBg: {
    height: 6,
    backgroundColor: 'rgba(0,0,0,0.06)',
    borderRadius: 3,
    overflow: 'hidden'
  },
  progressBarFill: {
    height: '100%',
    borderRadius: 3
  },
  timeRangeContainer: {
    marginBottom: 12,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8,
    padding: 12
  },
  timeRangeLabel: {
    fontSize: getFontSize(11),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE,
    marginBottom: 6
  },
  timeRangeButtons: {
    flexDirection: 'row',
    gap: 6
  },
  timeBtn: {
    flex: 1,
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: Colors.WHITE,
    borderWidth: 1,
    borderColor: '#EAEEF0',
    alignItems: 'center'
  },
  timeBtnActive: {
    backgroundColor: Colors.DARK_BLUE,
    borderColor: Colors.DARK_BLUE
  },
  timeBtnText: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    fontFamily: 'montserrat-600'
  },
  timeBtnTextActive: {
    color: Colors.WHITE,
    fontFamily: 'montserrat-700'
  },
  actionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 12,
    marginBottom: 12
  },
  actionBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
    borderRadius: 4
  },
  btnOutline: {
    borderColor: Colors.DARK_BLUE,
    borderWidth: 1
  },
  btnOutlineText: {
    color: Colors.DARK_BLUE,
    fontSize: getFontSize(12),
    fontFamily: 'redhat-700'
  },
  btnDestructive: {
    backgroundColor: Colors.RED
  },
  btnDestructiveText: {
    color: Colors.WHITE,
    fontSize: getFontSize(12),
    fontFamily: 'redhat-700'
  },
  modeContainer: {
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: Colors.BORDER_LIGHT,
    borderRadius: 6,
    overflow: 'hidden',
    marginBottom: 12
  },
  modeButton: {
    flex: 1,
    paddingVertical: 10,
    alignItems: 'center',
    backgroundColor: Colors.WHITE
  },
  modeActive: {
    backgroundColor: Colors.DARK_BLUE
  },
  modeText: {
    fontSize: getFontSize(12),
    color: Colors.DARK_BLUE,
    fontFamily: 'redhat-700'
  },
  modeTextActive: {
    color: Colors.WHITE
  },
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#EAEEF0',
    borderRadius: 6,
    padding: 3,
    marginBottom: 12
  },
  tabButton: {
    flex: 1,
    paddingVertical: 8,
    alignItems: 'center',
    borderRadius: 4
  },
  tabActive: {
    backgroundColor: Colors.WHITE
  },
  tabText: {
    fontSize: getFontSize(12),
    color: Colors.TEXT_GRAY,
    fontFamily: 'montserrat-600'
  },
  tabTextActive: {
    color: Colors.DARK_BLUE,
    fontFamily: 'montserrat-700'
  },
  searchContainer: {
    marginBottom: 10
  },
  listContainer: {
    paddingBottom: 24
  },
  eventCard: {
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 6,
    padding: 12,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: 'transparent'
  },
  eventCardExpanded: {
    borderColor: Colors.BORDER_LIGHT,
    backgroundColor: Colors.WHITE
  },
  eventHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  eventLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    marginRight: 8
  },
  typeBadge: {
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: 4,
    marginRight: 8
  },
  badgeApi: {
    backgroundColor: '#EBF4F6'
  },
  badgeDownload: {
    backgroundColor: '#FDF3E7'
  },
  typeBadgeText: {
    fontSize: getFontSize(8),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE
  },
  eventTitleContainer: {
    flex: 1
  },
  eventCaller: {
    fontSize: getFontSize(12),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE
  },
  eventUrlShort: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    marginTop: 1
  },
  eventRight: {
    alignItems: 'flex-end'
  },
  eventSize: {
    fontSize: getFontSize(12),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE
  },
  eventTime: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    marginTop: 1
  },
  expandedContent: {
    marginTop: 10
  },
  divider: {
    height: 1,
    backgroundColor: '#EAEEF0',
    marginBottom: 10
  },
  detailLabel: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    fontWeight: '600',
    marginBottom: 2
  },
  detailValue: {
    fontSize: getFontSize(11),
    color: Colors.DARK_BLUE,
    fontWeight: '500'
  },
  detailValueSelectable: {
    fontSize: getFontSize(11),
    color: Colors.DARK_BLUE,
    fontWeight: '500',
    backgroundColor: Colors.FILL_LIGHT,
    padding: 6,
    borderRadius: 4,
    marginBottom: 10
  },
  detailGrid: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10
  },
  gridItem: {
    flex: 1
  },
  textRed: {
    color: Colors.RED,
    fontFamily: 'redhat-700'
  },
  textGreen: {
    color: '#28A745',
    fontFamily: 'redhat-700'
  },
  emptyContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 60,
    gap: 8
  },
  emptyText: {
    fontSize: getFontSize(13),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE,
    marginTop: 10
  },
  emptySubText: {
    fontSize: getFontSize(11),
    color: Colors.TEXT_GRAY,
    textAlign: 'center',
    paddingHorizontal: 20
  },
  moduleWrapper: {
    marginBottom: 10,
    borderRadius: 8,
    overflow: 'hidden',
    backgroundColor: Colors.FILL_LIGHT,
    borderWidth: 1,
    borderColor: '#EAEEF0'
  },
  moduleHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 14,
    backgroundColor: Colors.FILL_LIGHT
  },
  moduleHeaderExpanded: {
    borderBottomWidth: 1,
    borderBottomColor: '#EAEEF0',
    backgroundColor: Colors.WHITE
  },
  moduleHeaderLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    marginRight: 8
  },
  moduleName: {
    fontSize: getFontSize(13),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE,
    marginRight: 8,
    flexShrink: 1
  },
  moduleSize: {
    fontSize: getFontSize(13),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE
  },
  moduleItemsContainer: {
    padding: 10,
    backgroundColor: Colors.WHITE,
    gap: 8
  },
  subItemCard: {
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 6,
    padding: 10,
    borderWidth: 1,
    borderColor: '#EAEEF0'
  },
  subItemHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 6
  },
  subItemUrl: {
    fontSize: getFontSize(11),
    color: Colors.DARK_BLUE,
    fontFamily: 'montserrat-600'
  },
  subItemSize: {
    fontSize: getFontSize(11),
    fontFamily: 'redhat-700',
    color: Colors.DARK_BLUE
  },
  subItemCount: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    marginTop: 1
  },
  subItemFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#EAEEF0',
    paddingTop: 6,
    marginTop: 2
  },
  subItemStatus: {
    fontSize: getFontSize(10),
    fontWeight: '600'
  },
  subItemDuration: {
    fontSize: getFontSize(10),
    color: Colors.TEXT_GRAY,
    fontWeight: '500'
  },
  countBadge: {
    backgroundColor: Colors.DARK_BLUE,
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2
  },
  countBadgeText: {
    color: Colors.WHITE,
    fontSize: getFontSize(9),
    fontWeight: '700'
  }
});
