Stirling-PDF/frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Text } from '@mantine/core';
import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection';

interface PageSelectionSyntaxHintProps {
  input: string;
  /** Optional known page count; if not provided, a large max is used for syntax-only checks */
  maxPages?: number;
  /** panel = full bulk panel style, compact = inline tool style */
  variant?: 'panel' | 'compact';
}

const FALLBACK_MAX_PAGES = 100000; // large upper bound for syntax validation without a document

const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSelectionSyntaxHintProps) => {
  const [syntaxError, setSyntaxError] = useState<string | null>(null);
  const { t } = useTranslation();

  useEffect(() => {
    const text = (input || '').trim();
    if (!text) {
      setSyntaxError(null);
      return;
    }

    try {
      const { warning } = parseSelectionWithDiagnostics(text, maxPages && maxPages > 0 ? maxPages : FALLBACK_MAX_PAGES);
      setSyntaxError(warning ? t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.') : null);
    } catch {
      setSyntaxError(t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.'));
    }
  }, [input, maxPages]);

  if (!syntaxError) return null;

  return (
    <div className={variant === 'panel' ? classes.selectedList : classes.errorCompact}>
      <Text size="xs" className={variant === 'panel' ? classes.errorText : classes.errorTextClamp}>{syntaxError}</Text>
    </div>
  );
};

export default PageSelectionSyntaxHint;