عنوان الشكوى {errors.title && (

{errors.title.message}

)}

تفاصيل الشكوى

{errors.description && (
            <p className="text-red-400 text-xs mt-1.5 ">
              {errors.description.message}
            </p>
          )}
        </div>

<div>
          <DocumentsUpload
            files={images}
            onAddFile={(file) =>
              setValue("images", [...images, file], { shouldValidate: true })
            }
            onRemoveFile={(idx) =>
              setValue(
                "images",
                images.filter((_, i) => i !== idx),
                { shouldValidate: true },
              )
            }
          />
          {errors.images && (
            <p className="text-red-400 text-xs mt-1.5 ">{errors.images.message}</p>
          )}
        </div>
      </div>

{error && (
        <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-3 mt-4 text-center">
          <p className="text-red-400 text-sm">{error}</p>
        </div>
      )}
    </form>
  );
}

export default function ComplaintModal({
  isOpen,
  onClose,
  mode,
  complaintId,
  onSuccess,
}: Readonly<ComplaintModalProps>) {
  const [details, setDetails] = useState<ComplaintDetails | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

const { validation } = useValidation();
  const schema = object({
    title: validation.title(),
    description: validation.description(),
    images: validation.files_optional(),
  });

const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = useForm<ComplaintFormData>({
    resolver: yupResolver(schema) as Resolver<ComplaintFormData>,
    defaultValues: { title: "", description: "", images: [] },
  });
  const images = watch("images");

useEffect(() => {
    let active = true;
    if (isOpen && mode === "view" && complaintId) {
      setLoading(true);
      setError("");
      apiFetch<ComplaintDetails>(`/provider/complains/${complaintId}`, {
        method: "GET",
        successCase: (res) => {
          if (active && res.data) setDetails(res.data);
        },
        errorCase: (res) => {
          if (active) setError(formatApiMsg(res.msg) || "خطأ في جلب التفاصيل");
        },
      }).finally(() => {
        if (active) setLoading(false);
      });
    }

if (isOpen && mode === "create") {
      reset({ title: "", description: "", images: [] });
      setError("");
    }

return () => {
      active = false;
    };
  }, [isOpen, mode, complaintId, reset]);

if (!isOpen) {
    return null;
  }

const onSubmit = async (data: ComplaintFormData) => {
    setError("");
    setLoading(true);

const fd = new FormData();
    fd.append("title", data.title);
    fd.append("description", data.description);
    data.images.forEach((file) => {
      fd.append("images[]", file);
    });

await apiFetch("/provider/complains", {
      method: "POST",
      body: fd,
      getSuccess: true,
      successCase: () => {
        onSuccess?.();
        onClose();
      },
      errorCase: (res) => {
        setError(formatApiMsg(res.msg) || "حدث خطأ، يرجى المحاولة مرة أخرى");
      },
    });
    setLoading(false);
  };

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <button
        type="button"
        aria-label="إغلاق النافذة"
        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
        onClick={onClose}
        onKeyDown={(event) => {
          if (event.key === "Escape") {
            onClose();
          }
        }}
      />
      <dialog
        open
        className="relative bg-[#2A2D36] rounded-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh] border-0 p-0 m-0"
      >
        <div className="flex items-center justify-between p-6 border-b border-white/5">
          <button
            type="button"
            onClick={onClose}
            className="w-8 h-8 flex items-center justify-center rounded-xl bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors cursor-pointer"
          >
            <i className="ri-close-line text-lg" />
          </button>
          <h2 className="text-white font-bold text-lg">
            {mode === "create" ? "إضافة شكوى جديدة" : "تفاصيل الشكوى"}
          </h2>
        </div>

<div className="p-6 overflow-y-auto">
          {mode === "view" ? (
            renderComplaintViewContent({ loading, error, details })
          ) : (
            <ComplaintCreateForm
              register={register}
              errors={errors}
              images={images}
              setValue={setValue}
              error={error}
              onSubmit={handleSubmit(onSubmit)}
            />
          )}
        </div>

{mode === "create" && (
          <div className="p-6 border-t border-white/5 bg-[#2A2D36]">
            <button
              type="submit"
              form="create-complaint-form"
              disabled={loading}
              className="w-full bg-[#FCD704] text-[#13151A] font-bold text-base py-3.5 rounded-xl cursor-pointer whitespace-nowrap flex items-center justify-center gap-2 hover:bg-[#FCD704]/90 disabled:opacity-70 transition-opacity"
            >
              {loading ? (
                <>
                  <i className="ri-loader-4-line animate-spin text-lg" />
                  <span>جاري الإرسال...</span>
                </>
              ) : (
                <span>إرسال الشكوى</span>
              )}
            </button>
          </div>
        )}
      </dialog>
    </div>
  );
}

عنوان الشكوى

وصف الشكوى

المرفقات

رد الإدارة