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 StorySurfaceOption = {
  value: string;
  label: string;
  hint: string;
};

export function StorySurfacePicker({
  visible,
  value,
  options,
  title,
  subtitle,
  closeLabel,
  onClose,
  onSelect,
}: {
  visible: boolean;
  value: string;
  options: StorySurfaceOption[];
  title: string;
  subtitle: string;
  closeLabel: string;
  onClose: () => void;
  onSelect: (value: string) => void;
}) {
  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <View style={styles.backdrop}>
        <Pressable style={styles.backdropPress} onPress={onClose} accessibilityLabel={closeLabel} />
        <View style={styles.sheet}>
          <View style={styles.handle} />
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.subtitle}>{subtitle}</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.optionBody}>
                  <Text style={styles.optionLabel}>{option.label}</Text>
                  <Text style={styles.optionHint}>{option.hint}</Text>
                </View>
                {selected ? (
                  <View style={styles.checkWrap}>
                    <AppIcon name="check" size={18} color={m3Colors.primary} />
                  </View>
                ) : null}
              </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,
  },
  option: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: spacing.md,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: m3Colors.outlineVariant,
  },
  optionBody: {
    flex: 1,
    minWidth: 0,
  },
  optionLabel: {
    color: m3Colors.onSurface,
    fontFamily: fonts.semibold,
    fontSize: 16,
  },
  optionHint: {
    color: m3Colors.onSurfaceVariant,
    ...m3Type.bodySmall,
    marginTop: 2,
  },
  checkWrap: {
    marginLeft: spacing.sm,
  },
});