import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useTheme } from '../../themecontext'; // Ajusta o caminho conforme a tua estrutura

const MainMenu = () => {
  const { isDarkMode } = useTheme();

  const themeStyles = {
    fundo: isDarkMode ? '#121212' : '#f5f5f5',
    card: isDarkMode ? '#1e1e1e' : '#fff',
    texto: isDarkMode ? '#fff' : '#000',
    textoSecundario: isDarkMode ? '#adb5bd' : 'gray',
    borda: isDarkMode ? '#333' : '#e0e0e0',
    iconFundo: isDarkMode ? '#2c2c2c' : '#f0f0f0'
  };

  const menuItems = [
    { id: 1, title: 'Criar Novo Sumário', icon: '📝' },
    { id: 2, title: 'Meus Sumários', icon: '📚' },
    { id: 3, title: 'Calendário', icon: '📅' },
    { id: 4, title: 'Notas', icon: '📊' },
    { id: 5, title: 'Horário', icon: '⏰' },
    { id: 6, title: 'Perfil', icon: '👤' },
    { id: 7, title: 'Configurações', icon: '⚙️' },
    { id: 8, title: 'Ajuda', icon: '❓' },
  ];

  const handlePress = (title: string) => {
    console.log(`Carregaste em: ${title}`);
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: themeStyles.fundo }]}>
      <StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
      
      <View style={[styles.header, { backgroundColor: themeStyles.card, borderBottomColor: themeStyles.borda }]}>
        <Text style={[styles.greeting, { color: themeStyles.texto }]}>Bem-vindo de volta, Ricardo!</Text>
        <Text style={[styles.subGreeting, { color: themeStyles.textoSecundario }]}>Desejamos-lhe um bom trabalho!</Text>
        <Text style={styles.date}>06/01/2026, 14:41:52</Text>
      </View>

      <ScrollView contentContainerStyle={styles.menuGrid}>
        {menuItems.map((item) => (
          <TouchableOpacity
            key={item.id}
            style={[styles.menuItem, { backgroundColor: themeStyles.card }]}
            onPress={() => handlePress(item.title)}
          >
            <View style={[styles.iconBox, { backgroundColor: themeStyles.iconFundo }]}>
              <Text style={styles.icon}>{item.icon}</Text>
            </View>
            <Text style={[styles.menuText, { color: themeStyles.texto }]}>{item.title}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      <TouchableOpacity 
        style={styles.bigButton}
        onPress={() => handlePress('Criar Novo Sumário')}
      >
        <Text style={styles.bigButtonText}>Criar Novo Sumário</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: { padding: 20, borderBottomWidth: 1 },
  greeting: { fontSize: 22, fontWeight: 'bold' },
  subGreeting: { fontSize: 16, marginTop: 5 },
  date: { fontSize: 14, color: '#0d6efd', marginTop: 10, fontWeight: '500' },
  menuGrid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', padding: 10 },
  menuItem: { width: '48%', borderRadius: 10, padding: 15, marginBottom: 15, alignItems: 'center', elevation: 3, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 3 },
  iconBox: { width: 50, height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center', marginBottom: 10 },
  icon: { fontSize: 24 },
  menuText: { fontSize: 14, fontWeight: '600', textAlign: 'center' },
  bigButton: { backgroundColor: '#0d6efd', margin: 20, padding: 18, borderRadius: 10, alignItems: 'center' },
  bigButtonText: { color: 'white', fontSize: 18, fontWeight: 'bold' },
});

export default MainMenu;