From f0a977031d75177ca4f7dcd91a4b83aa93b971d6 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Tue, 3 Jun 2025 21:50:07 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=B8=D0=B7=D0=B0=D0=B1=D0=BB=20=D0=BA?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BF=D1=80=D0=B8=20=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BA=D0=BE=D1=80=D1=80=D0=B5=D0=BA=D1=82=D0=BD=D1=8B?=
 =?UTF-8?q?=D1=85=20=D1=83=D1=81=D0=BB=D0=BE=D0=B2=D0=B8=D1=8F=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PersonalizationAI/AgeInputWithSelect.tsx  | 19 ++++++++++---------
 .../GenderAndAgeSelector.tsx                  |  9 ++++-----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/PersonalizationAI/AgeInputWithSelect.tsx b/src/pages/PersonalizationAI/AgeInputWithSelect.tsx
index f7125098..3703373f 100644
--- a/src/pages/PersonalizationAI/AgeInputWithSelect.tsx
+++ b/src/pages/PersonalizationAI/AgeInputWithSelect.tsx
@@ -18,9 +18,10 @@ import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
 interface AgeInputWithSelectProps {
   value: string;
   onChange: (value: string) => void;
+  onErrorChange?: (isError: boolean) => void;
 }
 
-const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => {
+const AgeInputWithSelect = ({ value, onChange, onErrorChange }: AgeInputWithSelectProps) => {
   const theme = useTheme();
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -30,36 +31,36 @@ const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => {
   const validate = (val: string) => {
     if (!val) return false;
     // Число (только положительное)
-    if (/^\d+$/.test(val)) {
+    if (/^-?\d+$/.test(val)) {
       const num = Number(val);
       if (num < 0 || num > 150) return 'range';
       return false;
     }
     // Диапазон (только положительные числа)
-    const rangeMatch = val.match(/^(\d+)-(\d+)$/);
+    const rangeMatch = val.match(/^(-?\d+)-(-?\d+)$/);
     if (rangeMatch) {
       const left = Number(rangeMatch[1]);
       const right = Number(rangeMatch[2]);
       if (left < 0 || left > 150 || right < 0 || right > 150 || left > right) return 'range';
       return false;
     }
-    // Если есть минус не в начале диапазона — это ошибка диапазона
-    if (/^-?\d+-\d+$/.test(val) || /^\d+-\d+-\d+$/.test(val)) {
-      return 'range';
-    }
     return 'format';
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const filtered = e.target.value.replace(/[^\d-]/g, '');
     onChange(filtered);
-    setErrorType(false);
+    const err = validate(filtered);
+    setErrorType(err);
+    if (onErrorChange) onErrorChange(!!err);
   };
 
   const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const trimmed = e.target.value.replace(/\s+/g, '');
     onChange(trimmed);
-    setErrorType(validate(trimmed));
+    const err = validate(trimmed);
+    setErrorType(err);
+    if (onErrorChange) onErrorChange(!!err);
   };
 
   const handleSelectItemClick = (selectedValue: string) => {
diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
index 8c0e7927..267d9e78 100644
--- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -19,9 +19,8 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
   const [selectOpen, setSelectOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
-  const isMobile = useMediaQuery(theme.breakpoints.down(800));
-
-  const isFormValid = gender && age;
+  const isMobile = useMediaQuery(theme.breakpoints.down(845));
+  const [ageError, setAgeError] = useState(false);
 
   const addItem = async () => {
     if (!quiz?.backendId) {
@@ -172,14 +171,14 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
             }}>Возраст</FormLabel>
             <InfoPopover />
           </Box>
-          <AgeInputWithSelect value={age} onChange={setAge} />
+          <AgeInputWithSelect value={age} onChange={setAge} onErrorChange={setAgeError} />
         </FormControl>
       </Box>
 
       <Button
         onClick={addItem}
         variant="contained"
-        disabled={!isFormValid}
+        disabled={!gender || !age || ageError}
         sx={{
           bgcolor: theme.palette.brightPurple.main,
           borderRadius: "8px",