import { Modal, Pressable, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Divider } from '../../atoms/Divider';
import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import type { ConfirmActionSheetProps } from './ConfirmActionSheet.types';

/**
 * Hoja de acciones modal con backdrop y opciones (icon + label).
 * Reemplazo del antiguo `ActionSheet` (que dependía de Paper).
 */
export function ConfirmActionSheet({
  visible,
  onClose,
  options,
  title,
  description,
}: ConfirmActionSheetProps) {
  const insets = useSafeAreaInsets();

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
      statusBarTranslucent
    >
      <View className="flex-1 justify-end">
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Cerrar hoja de acciones"
          onPress={onClose}
          className="absolute inset-0 bg-overlay/40"
        />
        <View
          style={{ paddingBottom: Math.max(insets.bottom, 16) }}
          className="rounded-t-2xl bg-card pt-3 shadow-lg"
        >
          <View className="mb-2 self-center h-1 w-12 rounded-full bg-content3" />
          {title || description ? (
            <View className="px-5 pb-2">
              {title ? (
                <Text variant="subtitleLarge" className="text-foreground">
                  {title}
                </Text>
              ) : null}
              {description ? (
                <Text variant="bodyMedium" tone="muted">
                  {description}
                </Text>
              ) : null}
            </View>
          ) : null}
          {options.map((option, idx) => {
            const handlePress = () => {
              if (option.disabled) {
                return;
              }
              onClose();
              option.onPress();
            };

            return (
              <View key={option.key}>
                {idx > 0 ? <Divider /> : null}
                <Pressable
                  accessibilityRole="button"
                  accessibilityLabel={option.label}
                  accessibilityState={{ disabled: !!option.disabled }}
                  onPress={handlePress}
                  className={cn(
                    'flex-row items-center gap-3 px-5 py-4 active:bg-content2',
                    option.disabled && 'opacity-50',
                  )}
                >
                  {option.icon ? (
                    <Icon
                      name={option.icon}
                      size={22}
                      className={option.destructive ? 'text-danger' : 'text-primary'}
                    />
                  ) : null}
                  <Text
                    variant="bodyMedium"
                    tone={option.destructive ? 'danger' : 'default'}
                    className="flex-1"
                  >
                    {option.label}
                  </Text>
                </Pressable>
              </View>
            );
          })}
        </View>
      </View>
    </Modal>
  );
}