remove additional code && fix bug select city and state && alert success and error message for comment in doctors page && handle set data after user searched in field doctors page && set data appointment from doctor data && set value in field search after user reload in doctors page

components/doctors/search/AutoComplete.js

@@ -1,42 +1,76 @@
 import { Autocomplete, TextField } from "@mui/material";
+import { useRef, useState, useEffect } from "react";
 
 function AutoComplete({
   data,
   noneBg,
   clearText,
-  inputValue,
+  inputValue, // مقدار کنترل‌شده از والد (اختیاری)
   placeholder,
-  handleSearch,
-  setInputValue,
+  handleSearch, // تابعی که باید با مقدار جستجو صدا زده بشه
+  setInputValue, // اختیاری: اگه والد دوست داره همون‌وقت مقدار رو بگیره
   setSelectedOption,
+  debounce = 500, // قابل تنظیم
 }) {
-  const clearIndicatorProps = clearText
-    ? {
-        clearIndicator: {
-          onClick: () => {
-            clearText();
-          },
-        },
-      }
-    : {};
+  const typingTimeoutRef = useRef(null);
+  const [localInput, setLocalInput] = useState(inputValue || "");
+
+  // همگام‌سازی وقتی والد مقدار کنترل‌شده رو تغییر میده (مثلاً بعد از انتخاب گزینه)
+  useEffect(() => {
+    setLocalInput(inputValue || "");
+  }, [inputValue]);
+
+  // پاک‌کردن تایمر هنگام unmount
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    };
+  }, []);
+
+  const onInputChange = (_, newInputValue) => {
+    // نمایش آنی تایپ کاربر
+    setLocalInput(newInputValue);
+
+    // اختیاری: اگر والد خواست همون‌جا مقدار رو بگیره
+    if (setInputValue) setInputValue(newInputValue);
+
+    // پاک کردن تایمر قبلی و ست کردن تایمر جدید برای debounce
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(() => {
+      handleSearch(newInputValue);
+    }, debounce);
+  };
+
+  const onChange = (_, newValue) => {
+    // انتخاب از لیست — مقدار رو فوراً پردازش کن
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+
+    const val = newValue
+      ? typeof newValue === "string"
+        ? newValue
+        : newValue.name
+      : "";
+    setLocalInput(val);
+    setSelectedOption && setSelectedOption(newValue);
+    handleSearch(val); // اجرای فوری روی انتخاب
+    if (setInputValue) setInputValue(val);
+  };
 
   return (
     <Autocomplete
       freeSolo
       options={data}
-      getOptionLabel={(option) => option.name}
+      getOptionLabel={(option) =>
+        typeof option === "string" ? option : option.name
+      }
       disableClearable
-      inputValue={inputValue || ""}
+      inputValue={localInput} // ← نمایش آنی از local state
       className="!w-full"
-      onInputChange={(_, newInputValue) => {
-        setInputValue && setInputValue(newInputValue);
-        handleSearch(newInputValue);
-      }}
-      onChange={(_, newValue) => {
-        setSelectedOption && setSelectedOption(newValue);
-        handleSearch(newValue ? newValue.name : "");
-      }}
-      // componentsProps={clearIndicatorProps}
+      onInputChange={onInputChange}
+      onChange={onChange}
       renderOption={(props, option) => (
         <li {...props} key={option.id}>
           {option.name}