import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { useAuth } from '../../context/AuthContext';
import { useMenu } from '../../context/MenuContext';
import { pathToScreen } from '../../config/routeMap';
import { navigateApp } from '../../navigation/appNavigation';
import type { AppStackParamList } from '../../navigation/types';
import { Icon } from '../ui/Icon';
import { colors, radii, shadows, spacing } from '../../constants/theme';

export function AppMenuModal() {
  const { menuOpen, closeMenu } = useMenu();
  const { navItems, userName, logout, subscriptionRestricted } = useAuth();

  const goTo = (path: string) => {
    const { screen, params } = pathToScreen(path);
    closeMenu();
    navigateApp(screen as keyof AppStackParamList, params as AppStackParamList[keyof AppStackParamList]);
  };

  return (
    <Modal visible={menuOpen} animationType="slide" transparent onRequestClose={closeMenu}>
      <Pressable style={styles.backdrop} onPress={closeMenu}>
        <Pressable style={styles.panel} onPress={(e) => e.stopPropagation()}>
          <View style={styles.brand}>
            <Icon name="dashboard" size={28} color={colors.primary} />
            <Text style={styles.brandTitle}>Online Clinic</Text>
            <Text style={styles.userName}>{userName}</Text>
          </View>
          <ScrollView>
            {navItems.map((item) => (
              <Pressable key={item.to} style={styles.item} onPress={() => goTo(item.to)}>
                <Icon name={item.icon} color={colors.primary} />
                <Text style={styles.itemLabel}>{item.label}</Text>
              </Pressable>
            ))}
            {!subscriptionRestricted ? (
              <Pressable style={styles.item} onPress={() => { closeMenu(); navigateApp('Profile'); }}>
                <Icon name="profile" color={colors.primary} />
                <Text style={styles.itemLabel}>Profile</Text>
              </Pressable>
            ) : null}
            <Pressable
              style={styles.item}
              onPress={() => {
                closeMenu();
                logout();
              }}
            >
              <Icon name="logout" color={colors.danger} />
              <Text style={[styles.itemLabel, { color: colors.danger }]}>Logout</Text>
            </Pressable>
          </ScrollView>
        </Pressable>
      </Pressable>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', flexDirection: 'row' },
  panel: {
    width: '82%',
    maxWidth: 320,
    backgroundColor: colors.surface,
    paddingTop: spacing.xl,
    paddingHorizontal: spacing.md,
    borderTopRightRadius: radii.lg,
    borderBottomRightRadius: radii.lg,
    borderRightWidth: 1,
    borderRightColor: colors.border,
    ...shadows.card,
  },
  brand: { marginBottom: spacing.lg, gap: spacing.xs },
  brandTitle: { fontSize: 20, fontWeight: '700', color: colors.text },
  userName: { fontSize: 14, color: colors.textMuted },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
    paddingVertical: spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
  },
  itemLabel: { fontSize: 16, fontWeight: '500', color: colors.text, flex: 1 },
});