import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '@/context/AuthContext';
import { Card } from '@/components/ui/Card';
import { Colors, FontSize, Spacing, Radius } from '@/constants/theme';
import { ScreenHeader } from '@/components/ui/ScreenHeader';

const MENU_ITEMS = [
  { icon: 'person-outline', label: 'Edit Profile', route: null },
  { icon: 'calendar-outline', label: 'My Reservations', route: '/(tenant)/reservations' },
  { icon: 'card-outline', label: 'Payment History', route: '/(tenant)/payments' },
  { icon: 'chatbubble-outline', label: 'Inquiries', route: '/(tenant)/inquiries' },
  { icon: 'notifications-outline', label: 'Notifications', route: '/(tenant)/notifications' },
  { icon: 'help-circle-outline', label: 'Help & Support', route: null },
  { icon: 'information-circle-outline', label: 'About ResiTrack', route: null },
];

export default function ProfileScreen() {
  const { user, logout } = useAuth();

  function handleLogout() {
    Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Sign Out', style: 'destructive', onPress: logout },
    ]);
  }

  return (
    <SafeAreaView style={styles.safe} edges={['top']}>
      <ScreenHeader title="My Profile" showMenu />
      <ScrollView contentContainerStyle={styles.content}>
        {/* Avatar */}
        <View style={styles.avatarSection}>
          <View style={styles.avatar}>
            <Text style={styles.avatarText}>{user?.name?.charAt(0).toUpperCase()}</Text>
          </View>
          <Text style={styles.name}>{user?.name}</Text>
          <Text style={styles.email}>{user?.email}</Text>
          <View style={styles.roleBadge}>
            <Ionicons name="person-outline" size={12} color={Colors.primary} />
            <Text style={styles.roleText}>Tenant</Text>
          </View>
        </View>

        {/* Info Card */}
        <Card style={styles.infoCard}>
          <View style={styles.infoRow}>
            <Ionicons name="mail-outline" size={18} color={Colors.textSecondary} />
            <Text style={styles.infoText}>{user?.email}</Text>
          </View>
          <View style={styles.infoRow}>
            <Ionicons name="call-outline" size={18} color={Colors.textSecondary} />
            <Text style={styles.infoText}>{user?.phone || 'Not set'}</Text>
          </View>
        </Card>

        {/* Menu */}
        <Card style={styles.menuCard}>
          {MENU_ITEMS.map((item, index) => (
            <TouchableOpacity key={item.label} style={[styles.menuItem, index < MENU_ITEMS.length - 1 && styles.menuItemBorder]}>
              <View style={styles.menuLeft}>
                <View style={styles.menuIcon}>
                  <Ionicons name={item.icon as any} size={18} color={Colors.primary} />
                </View>
                <Text style={styles.menuLabel}>{item.label}</Text>
              </View>
              <Ionicons name="chevron-forward" size={16} color={Colors.textLight} />
            </TouchableOpacity>
          ))}
        </Card>

        {/* Logout */}
        <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
          <Ionicons name="log-out-outline" size={20} color={Colors.danger} />
          <Text style={styles.logoutText}>Sign Out</Text>
        </TouchableOpacity>

        <Text style={styles.version}>ResiTrack v1.0.0</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: Colors.background },
  content: { padding: Spacing.md, paddingBottom: Spacing.xl, gap: Spacing.md },
  avatarSection: { alignItems: 'center', paddingVertical: Spacing.lg },
  avatar: { width: 80, height: 80, borderRadius: 40, backgroundColor: Colors.primary, alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.sm },
  avatarText: { fontSize: 36, fontWeight: '800', color: Colors.textInverse },
  name: { fontSize: FontSize.xl, fontWeight: '700', color: Colors.text },
  email: { fontSize: FontSize.sm, color: Colors.textSecondary, marginTop: 2 },
  roleBadge: { flexDirection: 'row', alignItems: 'center', gap: 4, backgroundColor: Colors.borderLight, borderRadius: Radius.full, paddingHorizontal: Spacing.sm, paddingVertical: 4, marginTop: Spacing.sm },
  roleText: { fontSize: FontSize.xs, fontWeight: '600', color: Colors.primary },
  infoCard: { gap: Spacing.sm },
  infoRow: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm },
  infoText: { fontSize: FontSize.md, color: Colors.text },
  menuCard: { padding: 0, overflow: 'hidden' },
  menuItem: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: Spacing.md },
  menuItemBorder: { borderBottomWidth: 1, borderBottomColor: Colors.borderLight },
  menuLeft: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
  menuIcon: { width: 36, height: 36, borderRadius: Radius.sm, backgroundColor: Colors.borderLight, alignItems: 'center', justifyContent: 'center' },
  menuLabel: { fontSize: FontSize.md, color: Colors.text },
  logoutBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: Spacing.sm, backgroundColor: '#FEE2E2', borderRadius: Radius.md, padding: Spacing.md },
  logoutText: { fontSize: FontSize.md, fontWeight: '700', color: Colors.danger },
  version: { textAlign: 'center', fontSize: FontSize.xs, color: Colors.textLight },
});