import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Alert,
  Image,
  ScrollView,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import * as SecureStore from 'expo-secure-store';
import * as ImagePicker from 'expo-image-picker';
import { router } from 'expo-router';
import { useAuth } from '@/contexts/AuthContext';
import { ProfileDrawer } from '@/components/ProfileDrawer';
import {
  AppColors,
  BorderRadius,
  FontSizes,
  Spacing,
  FontWeights,
  Shadows,
  AvatarSizes,
} from '@/constants/theme';

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

  // Drawer state
  const [drawerVisible, setDrawerVisible] = useState(false);

  // Settings states
  const [settings, setSettings] = useState({
    pushNotifications: true,
    emailNotifications: false,
    biometricLogin: false,
  });

  // Avatar
  const [avatarUri, setAvatarUri] = useState<string | null>(null);

  useEffect(() => {
    loadAvatar();
  }, [user?.user_id]);

  const loadAvatar = async () => {
    try {
      const uri = await SecureStore.getItemAsync('userAvatar');
      if (uri) {
        setAvatarUri(uri);
      }
    } catch (err) {
      console.error('Failed to load avatar:', err);
    }
  };

  const handleAvatarPress = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('Permission needed', 'Please allow access to your photo library to change avatar.');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.5,
    });

    if (!result.canceled && result.assets[0]) {
      const uri = result.assets[0].uri;
      setAvatarUri(uri);
      await SecureStore.setItemAsync('userAvatar', uri);
    }
  };

  const handleSettingChange = (key: string, value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }));
    if (key === 'biometricLogin' && value) {
      Alert.alert('Biometric Login', 'Biometric authentication enabled!');
    }
  };

  const handleLogout = () => {
    setDrawerVisible(false);
    Alert.alert(
      'Logout',
      'Are you sure you want to logout?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: async () => {
            await logout();
            router.replace('/(auth)/login');
          },
        },
      ]
    );
  };

  const userName = user?.user_name || 'User';
  const userInitial = userName.charAt(0).toUpperCase();

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.menuButton}
          onPress={() => setDrawerVisible(true)}
        >
          <Ionicons name="menu" size={24} color={AppColors.textPrimary} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Profile</Text>
        <View style={styles.placeholder} />
      </View>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Profile Card */}
        <View style={styles.profileCard}>
          <TouchableOpacity style={styles.avatarSection} onPress={handleAvatarPress}>
            <View style={styles.avatarContainer}>
              {avatarUri ? (
                <Image source={{ uri: avatarUri }} style={styles.avatarImage} />
              ) : (
                <Text style={styles.avatarText}>{userInitial}</Text>
              )}
              <View style={styles.avatarEditBadge}>
                <Ionicons name="camera" size={14} color={AppColors.white} />
              </View>
            </View>
          </TouchableOpacity>

          <Text style={styles.userName}>{userName}</Text>
          <Text style={styles.userEmail}>{user?.email || ''}</Text>
        </View>

        {/* Menu Items */}
        <View style={styles.menuSection}>
          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => router.push('/(tabs)/profile/edit')}
          >
            <View style={[styles.menuIcon, { backgroundColor: AppColors.primarySubtle }]}>
              <Ionicons name="person-outline" size={22} color={AppColors.primary} />
            </View>
            <Text style={styles.menuLabel}>Edit Profile</Text>
            <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => router.push('/(tabs)')}
          >
            <View style={[styles.menuIcon, { backgroundColor: AppColors.accentLight }]}>
              <Ionicons name="people-outline" size={22} color={AppColors.accent} />
            </View>
            <Text style={styles.menuLabel}>My Loved Ones</Text>
            <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => setDrawerVisible(true)}
          >
            <View style={[styles.menuIcon, { backgroundColor: AppColors.surfaceSecondary }]}>
              <Ionicons name="settings-outline" size={22} color={AppColors.textSecondary} />
            </View>
            <Text style={styles.menuLabel}>App Settings</Text>
            <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => router.push('/(tabs)/profile/help')}
          >
            <View style={[styles.menuIcon, { backgroundColor: AppColors.successLight }]}>
              <Ionicons name="help-circle-outline" size={22} color={AppColors.success} />
            </View>
            <Text style={styles.menuLabel}>Help & Support</Text>
            <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.menuItem, styles.menuItemLast]}
            onPress={handleLogout}
          >
            <View style={[styles.menuIcon, { backgroundColor: AppColors.errorLight }]}>
              <Ionicons name="log-out-outline" size={22} color={AppColors.error} />
            </View>
            <Text style={[styles.menuLabel, { color: AppColors.error }]}>Log Out</Text>
            <Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
          </TouchableOpacity>
        </View>
      </ScrollView>

      {/* Settings Drawer */}
      <ProfileDrawer
        visible={drawerVisible}
        onClose={() => setDrawerVisible(false)}
        onLogout={handleLogout}
        settings={settings}
        onSettingChange={handleSettingChange}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.background,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: Spacing.lg,
    paddingVertical: Spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  menuButton: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    backgroundColor: AppColors.surfaceSecondary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: FontSizes.lg,
    fontWeight: FontWeights.semibold,
    color: AppColors.textPrimary,
  },
  placeholder: {
    width: 40,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: Spacing.lg,
    paddingBottom: Spacing.xxl,
  },
  // Profile Card
  profileCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.xl,
    alignItems: 'center',
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  avatarSection: {
    marginBottom: Spacing.md,
  },
  avatarContainer: {
    width: AvatarSizes.xl,
    height: AvatarSizes.xl,
    borderRadius: AvatarSizes.xl / 2,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  avatarImage: {
    width: AvatarSizes.xl,
    height: AvatarSizes.xl,
    borderRadius: AvatarSizes.xl / 2,
  },
  avatarText: {
    fontSize: FontSizes['3xl'],
    fontWeight: FontWeights.bold,
    color: AppColors.white,
  },
  avatarEditBadge: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: AppColors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 3,
    borderColor: AppColors.surface,
  },
  userName: {
    fontSize: FontSizes['2xl'],
    fontWeight: FontWeights.bold,
    color: AppColors.textPrimary,
    marginBottom: Spacing.xs,
  },
  userEmail: {
    fontSize: FontSizes.sm,
    color: AppColors.textSecondary,
  },
  // Menu Section
  menuSection: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    overflow: 'hidden',
    ...Shadows.sm,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: Spacing.md,
    paddingHorizontal: Spacing.lg,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  menuItemLast: {
    borderBottomWidth: 0,
  },
  menuIcon: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.md,
  },
  menuLabel: {
    flex: 1,
    fontSize: FontSizes.base,
    color: AppColors.textPrimary,
    fontWeight: FontWeights.medium,
  },
  // Legacy styles (keeping for potential use)
  subscriptionCard: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    marginBottom: Spacing.lg,
    ...Shadows.sm,
  },
  subscriptionCardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.md,
  },
  subscriptionIconContainer: {
    width: 44,
    height: 44,
    borderRadius: BorderRadius.lg,
    justifyContent: 'center',
    alignItems: 'center',
  },
  subscriptionIconActive: {
    backgroundColor: AppColors.successLight,
  },
  subscriptionIconInactive: {
    backgroundColor: `${AppColors.warning}20`,
  },
  subscriptionHeaderText: {
    flex: 1,
  },
  subscriptionCardTitle: {
    fontSize: FontSizes.lg,
    fontWeight: FontWeights.bold,
    color: AppColors.textPrimary,
  },
  subscriptionCardSubtitle: {
    fontSize: FontSizes.sm,
    color: AppColors.textSecondary,
    marginTop: 2,
  },
});