import React from 'react';
import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, Image, ScrollView } from 'react-native';
import { Settings, Music, Map as MapIcon, Heart, LogOut } from 'lucide-react-native';
import { colors } from '../../utils/colors';
import { supabase } from '../../services/supabase';
import { useAuth } from '../../contexts/AuthContext';

// @ts-ignore
export default function ProfileScreen({ navigation }) {
  const { user } = useAuth();
  
  const handleLogout = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) {
      console.error('Error signing out:', error);
    }
  };

  const userName = user?.user_metadata?.name || user?.email?.split('@')[0] || 'Viajante';
  const userEmail = user?.email || '';

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Perfil</Text>
          <TouchableOpacity style={styles.settingsButton}>
            <Settings color={colors.textMain} size={20} />
          </TouchableOpacity>
        </View>

        <View style={styles.headerDivider} />

        {/* Profile Info */}
        <View style={styles.profileSection}>
          <View style={styles.avatarContainer}>
            <View style={styles.avatarImagePlaceholder}>
              <Text style={styles.avatarImageText}>{userName.charAt(0).toUpperCase()}</Text>
            </View>
            <View style={styles.spotifyBadge}>
              <Music color={colors.white} size={12} />
            </View>
          </View>
          
          <Text style={styles.userName}>{userName}</Text>
          <Text style={styles.userHandle}>{userEmail}</Text>
        </View>

        {/* Stats Row */}
        <View style={styles.statsRow}>
          <View style={styles.statCol}>
            <Text style={styles.statNumber}>0</Text>
            <Text style={styles.statLabel}>VIAGENS</Text>
          </View>
          <View style={styles.statCol}>
            <Text style={styles.statNumber}>0</Text>
            <Text style={styles.statLabel}>SEGUIDORES</Text>
          </View>
          <View style={styles.statCol}>
            <Text style={styles.statNumber}>0</Text>
            <Text style={styles.statLabel}>A SEGUIR</Text>
          </View>
        </View>

        <View style={styles.sectionDivider} />

        {/* Preferences Section */}
        <View style={styles.preferencesSection}>
          <Text style={styles.sectionTitle}>ESTATÍSTICAS E PREFERÊNCIAS</Text>
          
          <View style={styles.preferencesCard}>
            
            {/* Preference Item 1 */}
            <View style={styles.prefItem}>
              <View style={[styles.prefIconContainer, { backgroundColor: '#FFF0E5' }]}>
                <MapIcon color={colors.primary} size={20} />
              </View>
              <View style={styles.prefTextContainer}>
                <Text style={styles.prefTitle}>Distância Total</Text>
                <Text style={styles.prefSubtitle}>0 km conduzidos</Text>
              </View>
            </View>

            {/* Preference Item 2 */}
            <View style={[styles.prefItem, { marginBottom: 0, marginTop: 24 }]}>
              <View style={[styles.prefIconContainer, { backgroundColor: '#E8F5E9' }]}>
                <Heart color={colors.spotify} size={20} />
              </View>
              <View style={styles.prefTextContainer}>
                <Text style={styles.prefTitle}>Género Favorito</Text>
                <Text style={styles.prefSubtitle}>Ainda não definido</Text>
              </View>
            </View>

          </View>
        </View>

        {/* Logout Button */}
        <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
          <LogOut color={colors.error} size={20} style={styles.logoutIcon} />
          <Text style={styles.logoutText}>Terminar Sessão</Text>
        </TouchableOpacity>

      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  scrollContent: {
    paddingHorizontal: 20,
    paddingTop: 10,
    paddingBottom: 120, // Space for bottom tabs
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 10,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: '800',
    color: colors.textMain,
  },
  settingsButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: colors.inputBackground,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerDivider: {
    height: 1,
    backgroundColor: colors.inputBorder,
    marginTop: 16,
    marginBottom: 30,
    marginHorizontal: -20, // Extend to screen edges
  },
  profileSection: {
    alignItems: 'center',
    marginBottom: 30,
  },
  avatarContainer: {
    position: 'relative',
    marginBottom: 16,
  },
  avatarImagePlaceholder: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#FFE5D4',
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarImageText: {
    color: colors.primaryDark,
    fontWeight: 'bold',
    fontSize: 40,
  },
  spotifyBadge: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: colors.spotify,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: colors.background,
  },
  userName: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colors.textMain,
    marginBottom: 4,
  },
  userHandle: {
    fontSize: 16,
    color: colors.textSecondary,
    fontWeight: '500',
  },
  statsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    marginBottom: 24,
  },
  statCol: {
    alignItems: 'center',
    flex: 1,
  },
  statNumber: {
    fontSize: 22,
    fontWeight: '800',
    color: colors.textMain,
    marginBottom: 4,
  },
  statLabel: {
    fontSize: 11,
    fontWeight: 'bold',
    color: colors.textSecondary,
    letterSpacing: 1,
  },
  sectionDivider: {
    height: 1,
    backgroundColor: colors.inputBorder,
    marginBottom: 30,
  },
  preferencesSection: {
    marginBottom: 30,
  },
  sectionTitle: {
    fontSize: 12,
    fontWeight: 'bold',
    color: colors.textSecondary,
    letterSpacing: 1,
    marginBottom: 16,
  },
  preferencesCard: {
    backgroundColor: colors.white,
    borderRadius: 24,
    padding: 24,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 3,
  },
  prefItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  prefIconContainer: {
    width: 48,
    height: 48,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 16,
  },
  prefTextContainer: {
    flex: 1,
  },
  prefTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: colors.textMain,
    marginBottom: 4,
  },
  prefSubtitle: {
    fontSize: 14,
    color: colors.textSecondary,
  },
  logoutButton: {
    backgroundColor: '#FEF2F2', // Light red
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    borderRadius: 16,
    marginBottom: 20,
  },
  logoutIcon: {
    marginRight: 8,
  },
  logoutText: {
    color: colors.error,
    fontSize: 16,
    fontWeight: 'bold',
  },
});