import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Alert } from 'react-native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '../../../constants/theme';
import { useAuthStore } from '../../../store/authStore';

export default function AccountScreen() {
  const router = useRouter();
  const { logout, user_id } = useAuthStore();

  const handleLogout = () => {
    Alert.alert('Sair', 'Tem a certeza que deseja sair?', [
      { text: 'Cancelar', style: 'cancel' },
      { 
        text: 'Sair', 
        style: 'destructive',
        onPress: async () => {
          await logout();
          router.replace('/(public)');
        }
      },
    ]);
  };

  const MenuItem = ({ icon, title, subtitle, onPress, color = Colors.light.primary }: any) => (
    <TouchableOpacity style={styles.menuItem} onPress={onPress}>
      <View style={[styles.iconBox, { backgroundColor: color + '15' }]}>
        <Ionicons name={icon} size={22} color={color} />
      </View>
      <View style={styles.menuText}>
        <Text style={styles.menuTitle}>{title}</Text>
        {subtitle && <Text style={styles.menuSubtitle}>{subtitle}</Text>}
      </View>
      <Ionicons name="chevron-forward" size={20} color="#ccc" />
    </TouchableOpacity>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.profileHeader}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>C</Text>
        </View>
        <Text style={styles.profileName}>Meu Perfil</Text>
        <Text style={styles.profileEmail}>ID: #{user_id}</Text>
      </View>

      <View style={styles.menuSection}>
        <MenuItem 
          icon="person" 
          title="Editar Perfil" 
          subtitle="Informações pessoais e password"
          onPress={() => {}} 
        />
        <MenuItem 
          icon="calendar" 
          title="Meus Serviços" 
          subtitle="Histórico e agendamentos"
          onPress={() => router.push('/(auth)/bookings')} 
          color="#007bff"
        />
        <MenuItem 
          icon="wallet" 
          title="Carteira" 
          subtitle="Saldo e carregamentos"
          onPress={() => router.push('/(auth)/wallet')} 
          color="#28a745"
        />
        <MenuItem 
          icon="help-buoy" 
          title="Suporte / Tickets" 
          subtitle="Dúvidas e reclamações"
          onPress={() => router.push('/(auth)/tickets')} 
          color="#ffc107"
        />
      </View>

      <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
        <Ionicons name="log-out-outline" size={20} color="#dc3545" />
        <Text style={styles.logoutText}>Terminar Sessão</Text>
      </TouchableOpacity>
      
      <Text style={styles.version}>E-Concerto Mobile v1.0.0</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f8f9fa' },
  profileHeader: { alignItems: 'center', padding: 30, backgroundColor: '#fff' },
  avatar: { width: 80, height: 80, borderRadius: 40, backgroundColor: Colors.light.primary, justifyContent: 'center', alignItems: 'center', marginBottom: 15 },
  avatarText: { color: '#fff', fontSize: 32, fontWeight: 'bold' },
  profileName: { fontSize: 20, fontWeight: 'bold' },
  profileEmail: { color: '#666', marginTop: 5 },
  menuSection: { backgroundColor: '#fff', marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#eee' },
  menuItem: { flexDirection: 'row', alignItems: 'center', padding: 15, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' },
  iconBox: { width: 40, height: 40, borderRadius: 8, justifyContent: 'center', alignItems: 'center', marginRight: 15 },
  menuText: { flex: 1 },
  menuTitle: { fontSize: 16, fontWeight: '600' },
  menuSubtitle: { fontSize: 12, color: '#888', marginTop: 2 },
  logoutBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 20, marginTop: 20 },
  logoutText: { color: '#dc3545', fontWeight: 'bold', marginLeft: 10, fontSize: 16 },
  version: { textAlign: 'center', color: '#bbb', fontSize: 12, marginVertical: 30 }
});