WellNuo/components/ProfileDrawer.tsx

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Modal,
  Animated,
  Dimensions,
  Switch,
  ScrollView,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import {
  AppColors,
  BorderRadius,
  FontSizes,
  Spacing,
  FontWeights,
} from '@/constants/theme';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const DRAWER_WIDTH = SCREEN_WIDTH * 0.85;

interface DrawerItemProps {
  icon: keyof typeof Ionicons.glyphMap;
  label: string;
  onPress?: () => void;
  rightElement?: React.ReactNode;
  danger?: boolean;
  badge?: string;
}

function DrawerItem({ icon, label, onPress, rightElement, danger, badge }: DrawerItemProps) {
  return (
    <TouchableOpacity
      style={styles.drawerItem}
      onPress={onPress}
      disabled={!onPress && !rightElement}
      activeOpacity={0.6}
    >
      <View style={[styles.iconContainer, danger && styles.iconContainerDanger]}>
        <Ionicons
          name={icon}
          size={22}
          color={danger ? AppColors.error : AppColors.textSecondary}
        />
      </View>
      <Text style={[styles.drawerItemLabel, danger && styles.dangerText]}>
        {label}
      </Text>
      {badge && (
        <Text style={styles.badgeText}>{badge}</Text>
      )}
      {rightElement || (onPress && (
        <Ionicons name="chevron-forward" size={18} color={AppColors.textMuted} />
      ))}
    </TouchableOpacity>
  );
}

interface ProfileDrawerProps {
  visible: boolean;
  onClose: () => void;
  onLogout: () => void;
  settings: {
    pushNotifications: boolean;
    emailNotifications: boolean;
    biometricLogin: boolean;
  };
  onSettingChange: (key: string, value: boolean) => void;
}

export function ProfileDrawer({
  visible,
  onClose,
  onLogout,
  settings,
  onSettingChange,
}: ProfileDrawerProps) {
  const insets = useSafeAreaInsets();
  const slideAnim = React.useRef(new Animated.Value(-DRAWER_WIDTH)).current;
  const fadeAnim = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.parallel([
      Animated.timing(slideAnim, {
        toValue: visible ? 0 : -DRAWER_WIDTH,
        duration: 250,
        useNativeDriver: true,
      }),
      Animated.timing(fadeAnim, {
        toValue: visible ? 1 : 0,
        duration: 250,
        useNativeDriver: true,
      }),
    ]).start();
  }, [visible]);

  const handleNavigate = (route: string) => {
    onClose();
    router.push(route as any);
  };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="none"
      onRequestClose={onClose}
    >
      <View style={styles.overlay}>
        <Animated.View
          style={[styles.backdrop, { opacity: fadeAnim }]}
        >
          <TouchableOpacity
            style={StyleSheet.absoluteFill}
            activeOpacity={1}
            onPress={onClose}
          />
        </Animated.View>
        <Animated.View
          style={[
            styles.drawer,
            { transform: [{ translateX: slideAnim }] },
          ]}
        >
          <SafeAreaView style={styles.drawerContent} edges={['left']}>
            {/* Header */}
            <View style={[styles.drawerHeader, { paddingTop: insets.top + Spacing.md }]}>
              <Text style={styles.drawerTitle}>Settings</Text>
              <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <Ionicons name="close" size={24} color={AppColors.textSecondary} />
              </TouchableOpacity>
            </View>

            <ScrollView style={styles.drawerScroll} showsVerticalScrollIndicator={false}>
              {/* Preferences */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Preferences</Text>
                <DrawerItem
                  icon="notifications-outline"
                  label="Push Notifications"
                  rightElement={
                    <Switch
                      value={settings.pushNotifications}
                      onValueChange={(v) => onSettingChange('pushNotifications', v)}
                      trackColor={{ false: AppColors.border, true: AppColors.primary }}
                      thumbColor={AppColors.white}
                      ios_backgroundColor={AppColors.border}
                    />
                  }
                />
                <DrawerItem
                  icon="mail-outline"
                  label="Email Notifications"
                  rightElement={
                    <Switch
                      value={settings.emailNotifications}
                      onValueChange={(v) => onSettingChange('emailNotifications', v)}
                      trackColor={{ false: AppColors.border, true: AppColors.primary }}
                      thumbColor={AppColors.white}
                      ios_backgroundColor={AppColors.border}
                    />
                  }
                />
              </View>

              {/* Account */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Account</Text>
                <DrawerItem
                  icon="language-outline"
                  label="Language"
                  badge="EN"
                  onPress={() => handleNavigate('/(tabs)/profile/language')}
                />
              </View>

              {/* Support */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>Support</Text>
                <DrawerItem
                  icon="help-circle-outline"
                  label="Help Center"
                  onPress={() => handleNavigate('/(tabs)/profile/help')}
                />
                <DrawerItem
                  icon="chatbubble-outline"
                  label="Contact Support"
                  onPress={() => handleNavigate('/(tabs)/profile/support')}
                />
                <DrawerItem
                  icon="document-text-outline"
                  label="Terms & Privacy"
                  onPress={() => handleNavigate('/(tabs)/profile/terms')}
                />
              </View>

              {/* About */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>About</Text>
                <DrawerItem
                  icon="information-circle-outline"
                  label="About WellNuo"
                  onPress={() => handleNavigate('/(tabs)/profile/about')}
                />
              </View>

            </ScrollView>

            {/* Version */}
            <View style={styles.versionContainer}>
              <Text style={styles.versionText}>WellNuo v1.0.0</Text>
            </View>
          </SafeAreaView>
        </Animated.View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    flexDirection: 'row',
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  drawer: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: DRAWER_WIDTH,
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 2, height: 0 },
    shadowOpacity: 0.15,
    shadowRadius: 12,
    elevation: 8,
  },
  drawerContent: {
    flex: 1,
  },
  drawerHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: Spacing.lg,
    paddingBottom: Spacing.lg,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  drawerTitle: {
    fontSize: FontSizes.xl,
    fontWeight: FontWeights.bold,
    color: AppColors.textPrimary,
  },
  closeButton: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    backgroundColor: AppColors.surfaceSecondary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  drawerScroll: {
    flex: 1,
  },
  section: {
    paddingTop: Spacing.lg,
  },
  sectionTitle: {
    fontSize: FontSizes.xs,
    fontWeight: FontWeights.semibold,
    color: AppColors.textMuted,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: Spacing.sm,
    marginLeft: Spacing.lg,
  },
  drawerItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: Spacing.md,
    paddingHorizontal: Spacing.lg,
    borderBottomWidth: 1,
    borderBottomColor: AppColors.border,
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.md,
    backgroundColor: AppColors.surfaceSecondary,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: Spacing.md,
  },
  iconContainerDanger: {
    backgroundColor: AppColors.errorLight,
  },
  drawerItemLabel: {
    flex: 1,
    fontSize: FontSizes.base,
    fontWeight: FontWeights.medium,
    color: AppColors.textPrimary,
  },
  dangerText: {
    color: AppColors.error,
  },
  badgeText: {
    fontSize: FontSizes.sm,
    fontWeight: FontWeights.medium,
    color: AppColors.textMuted,
    marginRight: Spacing.sm,
  },
  versionContainer: {
    paddingVertical: Spacing.lg,
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: AppColors.border,
  },
  versionText: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
  },
});