import { type ReactNode } from 'react';
import { View } from 'react-native';

import { Spinner } from '../../atoms/Spinner';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';
import { EmptyState } from '../../molecules/EmptyState';

interface QueryStateProps {
  isLoading: boolean;
  error: Error | null;
  isEmpty: boolean;
  loadingText?: string;
  emptyText?: string;
  errorText?: string;
  emptyDescription?: string;
  errorDescription?: string;
  children: ReactNode;
  className?: string;
}

/**
 * Patrón visual para listas remotas:
 * - loading -> spinner centrado
 * - error -> EmptyState rojo
 * - vacío -> EmptyState neutro
 * - data -> children
 */
export function QueryState({
  isLoading,
  error,
  isEmpty,
  loadingText = 'Cargando…',
  emptyText = 'No hay resultados',
  errorText = 'Ocurrió un error',
  emptyDescription,
  errorDescription,
  children,
  className,
}: QueryStateProps) {
  if (isLoading) {
    return (
      <View
        accessibilityRole="progressbar"
        accessibilityLabel={loadingText}
        className={cn('items-center justify-center gap-3 p-6', className)}
      >
        <Spinner size="large" />
        <Text variant="bodyMedium" tone="muted">
          {loadingText}
        </Text>
      </View>
    );
  }

  if (error) {
    return (
      <EmptyState
        icon="alert"
        title={errorText}
        description={errorDescription ?? error.message}
        className={className}
      />
    );
  }

  if (isEmpty) {
    return (
      <EmptyState
        icon="info"
        title={emptyText}
        description={emptyDescription}
        className={className}
      />
    );
  }

  return <>{children}</>;
}