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

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

interface DrawerProps {
  visible: boolean;
  onClose: () => void;
  title?: string;
  children: ReactNode;
  /**
   * Altura máxima en porcentaje (`'90%'`) o `'100%'` para drawer fullscreen.
   */
  maxHeight?: string | number;
  className?: string;
  contentClassName?: string;
}

export function Drawer({
  visible,
  onClose,
  title,
  children,
  maxHeight = '90%',
  className,
  contentClassName,
}: DrawerProps) {
  const insets = useSafeAreaInsets();
  const isFullScreen = maxHeight === '100%' || maxHeight === '100' || maxHeight === 100;
  const heightStyle = isFullScreen
    ? { flex: 1 as const }
    : { height: typeof maxHeight === 'number' ? maxHeight : (maxHeight as `${number}%`) };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
      statusBarTranslucent
    >
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        className="flex-1 justify-end"
      >
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Cerrar"
          onPress={onClose}
          className="absolute inset-0 bg-overlay/50"
        />
        <View
          style={{ ...heightStyle, paddingBottom: Math.max(insets.bottom, 16) }}
          className={cn(
            'w-full rounded-t-2xl bg-card shadow-lg',
            isFullScreen && 'rounded-none',
            className,
          )}
        >
          {title ? (
            <View className="flex-row items-center justify-between border-b border-border px-4 pb-2 pt-3">
              <Text variant="subtitleLarge" tone="primary" className="font-bold">
                {title}
              </Text>
              <IconButton
                icon="close"
                size="sm"
                variant="ghost"
                accessibilityLabel="Cerrar"
                onPress={onClose}
                iconClassName="text-primary"
              />
            </View>
          ) : null}
          <View className={cn('flex-1 px-4 pt-3', contentClassName)}>{children}</View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
}