import type { ReactNode } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
import { AppIcon } from './app-icon';
import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';

export type ComposeReplyAudienceValue = 'everyone' | 'followers' | 'mentioned';

export type ComposeReplyAudienceOption = {
  value: ComposeReplyAudienceValue;
  label: string;
  hint: string;
  icon: ReactNode;
};

export function ComposeReplyAudienceSheet({
  visible,
  value,
  options,
  onClose,
  onSelect,
}: {
  visible: boolean;
  value: ComposeReplyAudienceValue;
  options: ComposeReplyAudienceOption[];
  onClose: () => void;
  onSelect: (value: ComposeReplyAudienceValue) => void;
}) {
  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <View style={styles.backdrop}>
        <Pressable style={styles.backdropPress} onPress={onClose} accessibilityLabel="Fechar" />
        <View style={styles.sheet}>
          <View style={styles.handle} />
          <Text style={styles.title}>Quem pode responder?</Text>
          <Text style={styles.subtitle}>
            Escolha quem pode responder a este post. Perfis mencionados sempre poderão responder.
          </Text>

          {options.map((option) => {
            const selected = option.value === value;
            return (
              <Pressable
                key={option.value}
                onPress={() => {
                  onSelect(option.value);
                  onClose();
                }}
                accessibilityRole="button"
                accessibilityState={{ selected }}
                style={({ pressed }) => [styles.option, pressed && { opacity: 0.86 }]}
              >
                <View style={styles.optionIconWrap}>{option.icon}</View>
                <View style={styles.optionBody}>
                  <Text style={styles.optionLabel}>{option.label}</Text>
                  <Text style={styles.optionHint}>{option.hint}</Text>
                </View>
                {selected ? (
                  <View style={styles.checkBadge}>
                    <AppIcon name="check" size={14} color={m3Colors.onPrimary} />
                  </View>
                ) : (
                  <View style={styles.checkSpacer} />
                )}
              </Pressable>
            );
          })}
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  backdropPress: {
    ...StyleSheet.absoluteFill,
    backgroundColor: m3Colors.scrim,
  },
  sheet: {
    backgroundColor: m3Colors.surface,
    borderTopLeftRadius: m3Shape.cornerExtraLarge,
    borderTopRightRadius: m3Shape.cornerExtraLarge,
    paddingHorizontal: spacing.lg,
    paddingBottom: spacing.xl,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: m3Colors.outlineVariant,
  },
  handle: {
    alignSelf: 'center',
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: m3Colors.outline,
    marginTop: spacing.sm,
    marginBottom: spacing.md,
  },
  title: {
    color: m3Colors.onSurface,
    ...m3Type.titleSmall,
    fontFamily: fonts.bold,
    marginBottom: spacing.xs,
  },
  subtitle: {
    color: m3Colors.onSurfaceVariant,
    ...m3Type.bodySmall,
    marginBottom: spacing.md,
    lineHeight: 18,
  },
  option: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: spacing.md,
    gap: spacing.md,
  },
  optionIconWrap: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: m3Colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  optionBody: {
    flex: 1,
    minWidth: 0,
  },
  optionLabel: {
    color: m3Colors.onSurface,
    fontFamily: fonts.semibold,
    fontSize: 16,
  },
  optionHint: {
    color: m3Colors.onSurfaceVariant,
    ...m3Type.bodySmall,
    marginTop: 2,
  },
  checkBadge: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: m3Colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkSpacer: {
    width: 24,
  },
});