// import React, { useEffect, useState } from "react";
// import swal from "sweetalert";
// import ClipLoader from "react-spinners/ClipLoader";
// import { Link } from "react-router-dom";
// import axios from "axios";
// import { isAutheticated } from "src/auth";

// function MobileApp() {
//   const [loading, setLoading] = useState(false);
//   const [PDApp, setPDApp] = useState("");
//   const [RDApp, setRDApp] = useState("");
//   const [SCApp, setSCApp] = useState("");
//   const [TMApp, setTMApp] = useState("");
//   const [display, setDisplay] = useState(true);
//   const token = isAutheticated();

//   // urlcreated images

//   const [PDAppUrl, setPDAppUrl] = useState("");
//   const [RDAppUrl, setRDAppUrl] = useState("");
//   const [SCAppUrl, setSCAppUrl] = useState("");
//   const [TMAppUrl, setTMAppUrl] = useState("");

//   useEffect(() => {
//     async function getConfiguration() {
//       const configDetails = await axios.get(`/api/config`, {
//         headers: {
//           Authorization: `Bearer ${token}`,
//         },
//       });
//       // console.log(configDetails.data.result[0]?.mobileapp[0]);
//       const data = configDetails.data.result[0]?.mobileapp[0];
//       setPDApp(data?.PDApp);
//       setRDApp(data?.RDApp);
//       setSCApp(data?.SCApp);
//       setTMApp(data?.TMApp);
//     }
//     getConfiguration();
//   }, []);

//   async function handelSubmit() {
//     setLoading(true);

//     const formdata = new FormData();
//     formdata.append("PDApp", PDApp);
//     formdata.append("RDApp", RDApp);
//     formdata.append("SCApp", SCApp);
//     formdata.append("TMApp", TMApp);

//     await axios
//       .post(`/api/config/mobile-app`, formdata, {
//         headers: {
//           Authorization: `Bearer ${token}`,
//           "Content-Type": "multipart/formdata",
//           "Access-Control-Allow-Origin": "*",
//         },
//       })
//       .then((res) => {
//         setLoading(false);
//         swal("Success!", res.data.message, res.data.status);
//       })
//       .catch((error) => {
//         setLoading(false);
//       });
//   }

//   return (
//     <div>
//       <div className="main-content">
//         <div className="page-content">
//           <div className="container-fluid">
//             <div className="row">
//               <div className="col-lg-12">
//                 <div className="card">
//                   <div className="card-body">
//                     <div className="row">
//                       <div className="col-md-12 col-lg-6 col-xl-6">
//                         <h1 className="text-left head-small">Mobile App</h1>

//                         <form>
//                           <div className="row">
//                             <div className="col-lg-12">
//                               <div className="form-group">
//                                 <>
//                                   <label
//                                     htmlFor="basicpill-phoneno-input"
//                                     className="label-100 mt-3"
//                                     style={{ fontWeight: "bold" }}
//                                   >
//                                     PD Mobile Application <br />
//                                   </label>
//                                   <div>
//                                     <input
//                                       type="file"
//                                       name="Logo  htmlFor Website Header(148 x 48 px)"
//                                       onChange={(e) => {
//                                         setPDApp(e.target.files[0]);
//                                         if (
//                                           e.target.files &&
//                                           e.target.files[0]
//                                         ) {
//                                           setPDAppUrl({
//                                             image: URL.createObjectURL(
//                                               e.target.files[0]
//                                             ),
//                                           });
//                                           console.log(setPDAppUrl);
//                                         }
//                                       }}
//                                       className="form-control input-field mb-3 col-md-6 d-inline-block"
//                                       id="basicpill-phoneno-input"
//                                     />
//                                     {display ? (
//                                       <img
//                                         className="ms-1"
//                                         style={{ width: "100px" }}
//                                         src={
//                                           PDAppUrl.image
//                                             ? PDAppUrl.image
//                                             : PDApp
//                                         }
//                                         alt=""
//                                       />
//                                     ) : (
//                                       ""
//                                     )}
//                                   </div>
//                                   <label
//                                     htmlFor="basicpill-phoneno-input"
//                                     className="label-100 mt-3"
//                                     style={{ fontWeight: "bold" }}
//                                   >
//                                     TM Mobile Application 
//                                    <br />
//                                   </label>
//                                   <br />
//                                   <input
//                                     type="file"
//                                     name="Logo htmlFor Website Footer(148 x 48 px)"
//                                     onChange={(e) => {
//                                       setRDApp(e.target.files[0]);

//                                       if (e.target.files && e.target.files[0]) {
//                                         setRDAppUrl({
//                                           image: URL.createObjectURL(
//                                             e.target.files[0]
//                                           ),
//                                         });
//                                       }
//                                     }}
//                                     className="form-control input-field mt-1 col-md-6 d-inline-block"
//                                     id="basicpill-phoneno-input"
//                                   />{" "}
//                                   {display ? (
//                                     <img
//                                       style={{ width: "100px" }}
//                                       src={
//                                         RDAppUrl.image
//                                           ? RDAppUrl.image
//                                           : RDApp
//                                       }
//                                       alt=""
//                                     />
//                                   ) : (
//                                     ""
//                                   )}
//                                   <label
//                                     htmlFor="basicpill-phoneno-input"
//                                     className="label-100 mt-2 row ms-1"
//                                     style={{ fontWeight: "bold" }}
//                                   >
//                                     SC Mobile Application
//                                     <br />
//                                   </label>
//                                   <input
//                                     type="file"
//                                     name="Logo htmlFor Admin Header(148 x 48 px)"
//                                     onChange={(e) => {
//                                       setSCApp(e.target.files[0]);

//                                       if (e.target.files && e.target.files[0]) {
//                                         setSCAppUrl({
//                                           image: URL.createObjectURL(
//                                             e.target.files[0]
//                                           ),
//                                         });
//                                       }
//                                     }}
//                                     className="form-control input-field col-md-6 d-inline-block"
//                                     id="basicpill-phoneno-input"
//                                   />{" "}
//                                   {display ? (
//                                     <img
//                                       style={{ width: "100px" }}
//                                       src={
//                                         SCAppUrl.image
//                                           ? SCAppUrl.image
//                                           : SCApp
//                                       }
//                                       alt=""
//                                     />
//                                   ) : (
//                                     ""
//                                   )}
//                                   <label
//                                     htmlFor="basicpill-phoneno-input"
//                                     className="label-100 mt-2 row ms-1"
//                                     style={{ fontWeight: "bold" }}
//                                   >
//                                     Retailer Mobile Application
//                                     <br />
//                                   </label>
//                                   <input
//                                     type="file"
//                                     name="Logo htmlFor Admin Header(148 x 48 px)"
//                                     onChange={(e) => {
//                                       setRDApp(e.target.files[0]);

//                                       if (e.target.files && e.target.files[0]) {
//                                         setRDAppUrl({
//                                           image: URL.createObjectURL(
//                                             e.target.files[0]
//                                           ),
//                                         });
//                                       }
//                                     }}
//                                     className="form-control input-field col-md-6 d-inline-block"
//                                     id="basicpill-phoneno-input"
//                                   />{" "}
//                                   {display ? (
//                                     <img
//                                       style={{ width: "100px" }}
//                                       src={
//                                         RDAppUrl.image
//                                           ? RDAppUrl.image
//                                           : RDApp
//                                       }
//                                       alt=""
//                                     />
//                                   ) : (
//                                     ""
//                                   )}
//                                 </>
//                               </div>
//                             </div>
//                           </div>
//                           <div className="row">
//                             <div className="col-lg-12">
//                               <div className="form-group text-left">
//                                 <button
//                                   type="button"
//                                   disabled={
//                                     SCApp === "" ||
//                                     RDApp === "" ||
//                                     PDApp === "" ||
//                                     TMApp === ""
//                                   }
//                                   onClick={handelSubmit}
//                                   className="btn btn-success btn-login waves-effect waves-light mr-3 pt-2 pb-2 pr-4 pl-4"
//                                 >
//                                   <ClipLoader loading={loading} size={18} />
//                                   {!loading && "Save"}
//                                 </button>
//                               </div>
//                             </div>
//                           </div>
//                         </form>
//                       </div>
//                     </div>

//                     {/* <!-- end table-responsive --> */}
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </div>
//           {/* <!-- container-fluid --> */}
//         </div>
//         {/* <!-- End Page-content --> */}
//       </div>
//     </div>
//   );
// }

// export default MobileApp;
import React, { useEffect, useState } from "react";
import swal from "sweetalert";
import ClipLoader from "react-spinners/ClipLoader";
import axios from "axios";
import { isAutheticated } from "src/auth";

function MobileApp() {
  const [loading, setLoading] = useState(false);
  const [PDApp, setPDApp] = useState(null);
  const [RDApp, setRDApp] = useState(null);
  const [SCApp, setSCApp] = useState(null);
  const [TMApp, setTMApp] = useState(null);
  const token = isAutheticated();

  // URLs for the uploaded APKs
  const [PDAppUrl, setPDAppUrl] = useState("");
  const [RDAppUrl, setRDAppUrl] = useState("");
  const [SCAppUrl, setSCAppUrl] = useState("");
  const [TMAppUrl, setTMAppUrl] = useState("");

  useEffect(() => {
    async function getConfiguration() {
      try {
        const configDetails = await axios.get(`/api/config`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        const data = configDetails.data.result[0]?.mobileapp[0];
        setPDAppUrl(data?.PDAppUrl || "");
        setRDAppUrl(data?.RDAppUrl || "");
        setSCAppUrl(data?.SCAppUrl || "");
        setTMAppUrl(data?.TMAppUrl || "");
      } catch (error) {
        console.error("Failed to fetch configuration", error);
      }
    }
    getConfiguration();
  }, []);

  async function handelSubmit() {
    setLoading(true);

    const formData = new FormData();
    if (PDApp) formData.append("PDApp", PDApp);
    if (RDApp) formData.append("RDApp", RDApp);
    if (SCApp) formData.append("SCApp", SCApp);
    if (TMApp) formData.append("TMApp", TMApp);

    try {
      const response = await axios.post(`/api/config/mobile-app`, formData, {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "multipart/form-data",
        },
      });
      setLoading(false);
      swal("Success!", response.data.message, "success");

      // Update the APK URLs from response
      setPDAppUrl(response.data.PDAppUrl);
      setRDAppUrl(response.data.RDAppUrl);
      setSCAppUrl(response.data.SCAppUrl);
      setTMAppUrl(response.data.TMAppUrl);

    } catch (error) {
      setLoading(false);
      console.error("Failed to upload APKs", error);
      swal("Error", "Failed to upload APKs", "error");
    }
  }

  return (
    <div>
      <div className="main-content">
        <div className="page-content">
          <div className="container-fluid">
            <div className="row">
              <div className="col-lg-12">
                <div className="card">
                  <div className="card-body">
                    <h1 className="text-left head-small">Mobile App</h1>
                    <form>
                      <div className="row">
                        <div className="col-lg-6">
                          <div className="form-group">
                            <label className="label-100 mt-3" style={{ fontWeight: "bold" }}>
                              PD Mobile Application
                            </label>
                            <input
                              type="file"
                              onChange={(e) => setPDApp(e.target.files[0])}
                              className="form-control input-field mb-3"
                            />
                            {PDAppUrl && (
                              <a href={PDAppUrl} download className="btn btn-link">
                                Download PD App
                              </a>
                            )}
                          </div>
                          <div className="form-group">
                            <label className="label-100 mt-3" style={{ fontWeight: "bold" }}>
                              Retailer Mobile Application
                            </label>
                            <input
                              type="file"
                              onChange={(e) => setRDApp(e.target.files[0])}
                              className="form-control input-field mb-3"
                            />
                            {RDAppUrl && (
                              <a href={RDAppUrl} download className="btn btn-link">
                                Download Retailer App
                              </a>
                            )}
                          </div>
                          <div className="form-group">
                            <label className="label-100 mt-3" style={{ fontWeight: "bold" }}>
                              SC Mobile Application
                            </label>
                            <input
                              type="file"
                              onChange={(e) => setSCApp(e.target.files[0])}
                              className="form-control input-field mb-3"
                            />
                            {SCAppUrl && (
                              <a href={SCAppUrl} download className="btn btn-link">
                                Download SC App
                              </a>
                            )}
                          </div>
                          <div className="form-group">
                            <label className="label-100 mt-3" style={{ fontWeight: "bold" }}>
                              TM Mobile Application
                            </label>
                            <input
                              type="file"
                              onChange={(e) => setTMApp(e.target.files[0])}
                              className="form-control input-field mb-3"
                            />
                            {TMAppUrl && (
                              <a href={TMAppUrl} download className="btn btn-link">
                                Download TM App
                              </a>
                            )}
                          </div>
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={handelSubmit}
                        className="btn btn-success mt-3"
                        disabled={loading}
                      >
                        {loading ? <ClipLoader size={18} /> : "Save"}
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MobileApp;