import axios from "axios";
import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import axiosInstance from "../../api/axiosInstance";
import SvgSpinner from "../loading/SvgSpinner";
import Alert from "../../utils/Alert";

const IncomeInformation = ({
  onNext,
  onBack,
  user,
  userIncom,
  setUserIncom,
  requestId,
}) => {
  const [uploadProgress, setUploadProgress] = useState({});
  const [mandatoryFiles, setMandatoryFiles] = useState({
    AccountTurnover: null,
    SalarySlip: null,
  });
  const [fileErrors, setFileErrors] = useState({});

  // آیدی دریافتی از عکس آپلود شده
  const [attachmentIdList, setAttachmentIdList] = useState([]);

  const userId = user?.id;

  const reqId = requestId;

  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors },
  } = useForm({
    defaultValues: userIncom,
  });

  const formatNumber = (value) => {
    if (!value) return "";
    const num = value.toString().replace(/,/g, "").replace(/\D/g, "");
    return num.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  const Income = watch("income");
  const installmentPayment = watch("payAbility");

  const navigate = useNavigate();
  const onSubmit = (data) => {
    console.log("Income");
    if (Income <= installmentPayment) {
      toast.error("مقدار قسط نباید بیشتر از درآمد شما باشد");
      return;
    }
    setUserIncom(data);
    setFileErrors({}); // ارورها پاک بشن اگه همه چیز درست بود

    async function postData(data) {
      console.log(data);
      try {
        const response = await axiosInstance.post(
          `${import.meta.env.VITE_BASE_API}/api/v1/IncomeInfo/Create`,
          {
            isActive: true,
            income: Income,
            payAbility: installmentPayment,
            requestId: reqId,
            attachmentIds: [...attachmentIdList],
          }
        );
      } catch (error) {
        toast.error("خطا در ارسال اطلاعات درآمدی");
      }
    }
    postData(data);

    onNext();
  };

  // Upload a file to the server

  const uploadFileToServer = async (fileData) => {
    try {
      const formData = new FormData();
      formData.append("Name", fileData.name);
      formData.append("attachmentType", 100); // یا 106
      formData.append(
        "file",
        new Blob(
          [Uint8Array.from(atob(fileData.file), (c) => c.charCodeAt(0))],
          {
            type: fileData.format,
          }
        ),
        fileData.name
      );

      const response = await axios.post(
        `${import.meta.env.VITE_BASE_API}/api/v1/Attachment/Create1`,
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      if (response.status === 200) {
        setAttachmentIdList([...attachmentIdList, response.data.data.id]);
        setUploadProgress((prev) => ({ ...prev, [fileData.name]: "success" }));
      } else {
        setUploadProgress((prev) => ({ ...prev, [fileData.name]: "error" }));
      }
    } catch (error) {
      setUploadProgress((prev) => ({ ...prev, [fileData.name]: "error" }));
      if (error.response?.status === 401) {
        localStorage.removeItem("userInfo");
        localStorage.removeItem("aToken");
        navigate("/login");
      }
    }
  };

  // تابع مشترک برای آپلود فایل اجباری از طریق انتخاب یا درگ اند دراپ
  const processMandatoryFile = (file, key) => {
    if (file && file.size <= 3 * 1024 * 1024) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const fileData = {
          name: key,
          file: reader.result.split(",")[1], // محتوای Base64
          format: file.type,
        };
        setMandatoryFiles((prev) => ({ ...prev, [key]: fileData }));
        setUploadProgress((prev) => ({ ...prev, [key]: "uploading" }));
        uploadFileToServer(fileData);
      };
      reader.readAsDataURL(file);
    } else {
      toast.error("سایز فایل باید کمتر از ۳ مگابایت باشد.");
    }
  };

  // مدیریت آپلود از طریق انتخاب فایل
  const handleMandatoryUpload = (event, key) => {
    const file = event.target.files[0];
    processMandatoryFile(file, key);
  };

  // مدیریت آپلود از طریق درگ اند دراپ
  const handleDrop = (event, key) => {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    processMandatoryFile(file, key);
  };

  // همان منطق آپلود اختیاری قبلی باقی می‌ماند
  const handleOptionalUpload = (event, index) => {
    const file = event.target.files[0];
    if (file && file.size <= 3 * 1024 * 1024) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const fileData = {
          name: `optional_${index + 1}`,
          file: reader.result.split(",")[1],
          format: file.type,
        };
        setOptionalFiles((prev) => {
          const updated = [...prev];
          updated[index] = fileData;
          return updated;
        });
        setUploadProgress((prev) => ({
          ...prev,
          [`optional_${index + 1}`]: "uploading",
        }));
        uploadFileToServer(fileData);
      };
      reader.readAsDataURL(file);
    } else {
      alert("File size must be less than 3MB.");
    }
  };

  // افزودن فیلد اختیاری (تا ۳ فایل)
  const handleAddOptionalField = () => {
    if (optionalFiles.length < 3) {
      setOptionalFiles([...optionalFiles, null]);
    } else {
      alert("You can only upload up to 3 optional files.");
    }
  };

  // Income مقدار درامد
  // installmentPayment توانایی پرداخت قسط
  // AccountTurnover  گردش حساب
  // SalarySlip فیش حقوقی

  const payAbilityValue = watch("payAbility"); // مقدار فعلی payAbility

  return (
    <div>
      <Alert>
        <p>این بخش اختیاری است</p>
      </Alert>
      <form onSubmit={handleSubmit(onSubmit)} className="w-full gap-4 ">
        <div className=" max-lg:grid-cols-1 bg-white custom-shadow rounded-2xl gap-4 p-6">
          <p className="text-xs font-bold text-red-500 -mt-4 mb-2">اختیاری</p>
          <h2 className="text-lg font-bold mb-4">اطلاعات درآمدی</h2>
          <div dir="rtl" className="grid grid-cols-2 gap-10">
            <div className="grid col-span-2 grid-cols-2 row-span-1">
              <div className="md:flex gap-8 col-span-2 mb-6">
                <div className="flex flex-col col-span-1 w-full mt-6">
                  <label
                    htmlFor="Income"
                    className="text-sm font-bold text-black relative top-2 mb-0 mr-2 px-1 bg-white w-max"
                  >
                    مقدار درآمد (تومان)
                  </label>
                  <Controller
                    name="income"
                    control={control}
                    rules={{
                      validate: (value) => {
                        const payAbility = watch("payAbility")?.replace(
                          /,/g,
                          ""
                        );
                        if (payAbility && !value) {
                          return "مقدار درآمد الزامی است";
                        }
                        return true;
                      },
                    }}
                    render={({ field }) => (
                      <input
                        {...field}
                        value={formatNumber(field.value)}
                        onChange={(e) =>
                          field.onChange(e.target.value.replace(/,/g, ""))
                        }
                        className="p-[11px_10px] border-2 border-gray-primary rounded-lg bg-white focus:outline-none"
                        placeholder="مثال: 200,000,000"
                        type="text"
                      />
                    )}
                  />
                  {errors.income && (
                    <span className="text-red-500 text-xs">
                      {errors.income.message}
                    </span>
                  )}
                </div>

                {/* میزان اقساط ماهیانه */}
                <div className="flex flex-col w-full mt-6">
                  <label className="text-sm font-bold text-black relative top-2 mb-0 mr-2 px-1 bg-white w-max">
                    میزان اقساط ماهیانه شما (تومان) :
                  </label>
                  <Controller
                    name="payAbility"
                    control={control}
                    rules={{
                      required: "این فیلد الزامی است",
                      validate: (value) => {
                        if (!value) return true;
                        const incomeValue = watch("payAbility")?.replace(
                          /,/g,
                          ""
                        );
                        const payAbility = value?.replace(/,/g, "");
                        if (Number(payAbility) > Number(incomeValue)) {
                          return "میزان اقساط نمی‌تواند بیشتر از درآمد باشد.";
                        }
                        return true;
                      },
                    }}
                    render={({ field }) => (
                      <input
                        {...field}
                        value={formatNumber(field.value)}
                        onChange={(e) =>
                          field.onChange(e.target.value.replace(/,/g, ""))
                        }
                        className="p-[11px_10px] border-2 border-gray-primary rounded-lg bg-white focus:outline-none"
                        placeholder="مثال: 50,000,000"
                        type="text"
                      />
                    )}
                  />
                  {errors.installment && (
                    <span className="text-red-500 text-xs">
                      {errors.installment.message}
                    </span>
                  )}
                </div>
              </div>

              <div className="col-span-2 md:flex gap-6">
                <div className="w-full">
                  <label className="block text-lg font-medium mb-2 text-gray-700">
                    گردش حساب
                  </label>
                  <div
                    className="border border-gray-300 rounded-lg p-4 w-full text-center cursor-pointer hover:bg-gray-100 transition-colors duration-300"
                    onDragOver={(e) => e.preventDefault()}
                    onDrop={(e) => handleDrop(e, "AccountTurnover")}
                  >
                    {mandatoryFiles.AccountTurnover ? (
                      <img
                        src={`data:${mandatoryFiles.AccountTurnover.format};base64,${mandatoryFiles.AccountTurnover.file}`}
                        alt="گردش حساب"
                        width="60"
                        height="60"
                        className="mx-auto mb-2 rounded"
                      />
                    ) : (
                      <span className="block text-sm text-gray-500 mb-2">
                        فایل را بکشید و رها کنید یا کلیک کنید
                      </span>
                    )}
                    <input
                      type="file"
                      className="mt-2 w-full text-sm text-gray-600 file:py-2 file:px-4 file:border file:border-gray-300 file:rounded file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100"
                      onChange={(e) =>
                        handleMandatoryUpload(e, "AccountTurnover")
                      }
                    />
                    {/* {fileErrors.AccountTurnover && (
                      <p className="text-red-500 text-sm mt-1">
                        {fileErrors.AccountTurnover}
                      </p>
                    )} */}
                  </div>
                  {uploadProgress.AccountTurnover && (
                    <div className="mt-2 text-center">
                      {uploadProgress.AccountTurnover === "uploading" && (
                        <div role="status">
                          {/* Spinner */}
                          <SvgSpinner />

                          <span className="sr-only">Loading...</span>
                        </div>
                      )}
                      {uploadProgress.AccountTurnover === "success" && (
                        <p className="text-green-500 text-sm">
                          با موفقیت آپلود شد!
                        </p>
                      )}
                      {uploadProgress.AccountTurnover === "error" && (
                        <p className="text-red-500 text-sm">
                          مشکلی پیش آمد، مجدداً تلاش کنید.
                        </p>
                      )}
                    </div>
                  )}
                </div>
                <div className="w-full">
                  <label className="block text-lg font-medium mb-2 text-gray-700">
                    فیش حقوقی
                  </label>
                  <div
                    className="border border-gray-300 rounded-lg p-4 w-full text-center cursor-pointer hover:bg-gray-100 transition-colors duration-300"
                    onDragOver={(e) => e.preventDefault()}
                    onDrop={(e) => handleDrop(e, "SalarySlip")}
                  >
                    {mandatoryFiles.SalarySlip ? (
                      <img
                        src={`data:${mandatoryFiles.SalarySlip.format};base64,${mandatoryFiles.SalarySlip.file}`}
                        alt="فیش حقوقی"
                        width="60"
                        height="60"
                        className="mx-auto mb-2 rounded"
                      />
                    ) : (
                      <span className="block text-sm text-gray-500 mb-2">
                        فایل را بکشید و رها کنید یا کلیک کنید
                      </span>
                    )}
                    <input
                      type="file"
                      className="mt-2 w-full text-sm text-gray-600 file:py-2 file:px-4 file:border file:border-gray-300 file:rounded file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100"
                      onChange={(e) => handleMandatoryUpload(e, "SalarySlip")}
                    />
                  </div>
                  {uploadProgress.SalarySlip && (
                    <div className="mt-2 text-center">
                      {uploadProgress.SalarySlip === "uploading" && (
                        <div role="status">
                          {/* Spinner */}
                          <SvgSpinner />

                          <span className="sr-only">Loading...</span>
                        </div>
                      )}
                      {uploadProgress.SalarySlip === "success" && (
                        <p className="text-green-500 text-sm">
                          با موفقیت آپلود شد!
                        </p>
                      )}
                      {uploadProgress.SalarySlip === "error" && (
                        <p className="text-red-500 text-sm">
                          مشکلی پیش آمد، مجدداً تلاش کنید.
                        </p>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-row justify-end mt-24">
          {/* <button
            type="button"
            className="bg-gray-600 text-white px-4 py-2 rounded"
            onClick={onBack}
          >
            مرحله قبل
          </button> */}
          <button
            onClick={handleSubmit(onSubmit)}
            type="submit"
            className="bg-gradient-to-r bg-gold-primary-900 text-white px-4 py-2 rounded"
          >
            مرحله بعد
          </button>
        </div>
      </form>
    </div>
  );
};

export default IncomeInformation;


من میخام توی این کامپوننت این کارو برام بکنی 
این اینپوت ها اختیاری باشن میتونه خالی باشه رد کنه و مشکلی نداره 
ولی اگر یدونه از این مقادیر پر شد باید چک کنی که payAbility باید بیشتر از income باشه و اگر نبود توی toast این ارور رو بدی "درامد شما باید بیشتر از قسط های شما باشد"