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

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

/**
 * ActionSheet legacy. Mantiene la API previa (Paper icon-name string en
 * `option.icon`) y traduce nombres conocidos a `Icon`.
 *
 * Para nuevos casos usar `ConfirmActionSheet` con `IconName` tipado.
 */
export interface ActionSheetOption {
  key: string;
  label: string;
  icon?: string;
  destructive?: boolean;
  onPress: () => void;
}

interface ActionSheetProps {
  visible: boolean;
  onClose: () => void;
  options: ActionSheetOption[];
}

const paperToAppIcon: Record<string, IconName> = {
  pencil: 'pencil',
  delete: 'trash',
  archive: 'archive',
  'archive-outline': 'archive',
  send: 'send',
  edit: 'edit',
  close: 'close',
  'cloud-upload': 'upload',
  'cloud-sync': 'refresh',
  'content-save-outline': 'save',
};

function resolveIcon(name?: string): IconName | undefined {
  if (!name) return undefined;
  if (name in paperToAppIcon) return paperToAppIcon[name];
  return name as IconName;
}

export function ActionSheet({ visible, onClose, options }: ActionSheetProps) {
  const insets = useSafeAreaInsets();

  const handleOptionPress = (onPress: () => void) => {
    onClose();
    onPress();
  };

  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" />
          {options.map((option) => {
            const iconName = resolveIcon(option.icon);
            return (
              <Pressable
                key={option.key}
                accessibilityRole="button"
                accessibilityLabel={option.label}
                onPress={() => handleOptionPress(option.onPress)}
                className={cn('flex-row items-center gap-3 px-5 py-4 active:bg-content2')}
              >
                {iconName ? (
                  <Icon
                    name={iconName}
                    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>
    </Modal>
  );
}