import React, { useState, useContext, useEffect } from "react";

import {

 IonIcon,
 IonPage,
 IonRow,

 IonRouterLink,
 IonButton,
 IonSelect,
 IonSelectOption,
 IonInput,
 IonList,
 IonItem,
 useIonRouter,
 IonLoading,
 IonAlert,
 IonLabel,
 IonCol,
} from "@ionic/react";
import { Context } from "../../context/contex";

import {
 alertCircle,
 checkmarkCircle,
 copyOutline,
} from "ionicons/icons";
import { formatNumber, getFirstWord, generateRequestId } from "../../utils";
import AppShell from "../../components/Header";

const PayEducation: React.FC = () => {
 const [vendors, setVendors] = useState<any>([]);
 const [variations, setVariations] = useState<any>({});
 const [vendor, setVendor] = useState<any>({});
 const [decDetails, setDecDetails] = useState<any>({});
 const [buyDetails, setBuyDetails] = useState<any>({});
 const [packages, setPackages] = useState<any>({});
 const [decNumber, setDecNumber] = useState<string>("");
 const quantities = Array.from({ length: 10 }, (_, i) => i + 1);
 const [quantity, setQuantity] = useState<number>(1);
 const [pinModal, setPinModal] = useState(false);
 const [cancel, setCancel] = useState(false);
 const context = useContext(Context);
 const router = useIonRouter();
 if (!context) {
  return <div>Loading...</div>;
 }

 const {
apiRequest,
busy,
setBusy,
  presentToast,
  userInfo,
  vtpassApiKey,
  vtpassBase,
  vtpassPubKey,
  vtpBalance,
  settings,
  copy,
  reportLowBalance,
 } = context;

 const fetchServiceID = async (identifier: string) => {
  setBusy(true);
  try {
   const response = await fetch(
    vtpassBase + `services?identifier=${identifier}`,
    {
     method: "GET",
     headers: {
      "Content-Type": "application/json",
      "api-key": vtpassApiKey,
      "public-key": vtpassPubKey,
     },
    }
   );

   if (!response.ok) {
    throw new Error("Network response was not ok");
   }

   const result = await response.json();
   if (result.response_description === "000" && result.content) {
    console.log("VENDOR", result.content);
    setBusy(false);

    return result.content;
   } else {
    setBusy(false);

    return null;
   }
  } catch (error) {
   console.error("Error fetching service ID:", error);
   setBusy(false);

   return null;
  }
 };

 useEffect(() => {
  const fetchServices = async () => {
   try {
    const as = await fetchServiceID("education");
    //   const ds = await fetchServiceID("data");

    if (as) {
     setVendors(as);
    }
   } catch (error) {
    console.error("Error fetching services:", error);
   }
  };
  fetchServices();
 }, [vtpassBase, vtpassApiKey, vtpassPubKey]);

 const getVariations = async (identifier: string) => {
  setBusy(true);
  setDecDetails({});
  setBuyDetails({});
  setPackages({});
  try {
   const response = await fetch(
    vtpassBase + `service-variations?serviceID=${identifier}`,
    {
     method: "GET",
     headers: {
      "Content-Type": "application/json",
      "api-key": vtpassApiKey,
      "public-key": vtpassPubKey,
     },
    }
   );

   if (!response.ok) {
    throw new Error("Network response was not ok");
   }

   const result = await response.json();
   if (result.response_description === "000" && result.content) {
    console.log("VAR", result.content.varations);
    setVariations(result.content.varations);
    setBusy(false);
   } else {
    console.error("Error fetching service variations:", result);
    setBusy(false);

    return null;
   }
  } catch (error) {
   console.error("Error getting variations:", error);
   setBusy(false);

   return null;
  }
 };

 useEffect(() => {
  if (!vendor.serviceID) {
   return;
  }
  getVariations(vendor.serviceID);
 }, [vendor.serviceID]);

 const verifyDecNumber = async () => {
  if (!decNumber) {
   presentToast(
    "top",
    `Jamb profile ID number is empty.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  if (Object.keys(vendor).length === 0) {
   presentToast(
    "top",
    `Please choose a vendor.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  setDecDetails({});
  setBuyDetails({});
 const result = await apiRequest(
  "POST",
  "", //url
{
 action: "verify_profile_id",
     serviceID: vendor.serviceID,
     type: packages.variation_code,
     billersCode: String(decNumber),
},
  false,       // require auth
  false   // show success or error messages
  
) as any;
  if (result?.success && result?.data && !result?.data.content?.error) {
    console.log("verified", result.data);
    setDecDetails(result.data.content);
   } else {
    console.log("not verified", result.data);
    presentToast(
     "top",
     `${result.data?.content?.error || result.message}`,
     () => null,
     "danger",
     alertCircle
    );
   }

 };

 const handlePay = async (pin: number) => {
  if (cancel) return;
  if (!userInfo) {
   router.push("/login", "forward", "replace");
   return;
  }

  if (userInfo.tx_pin === null) {
   presentToast(
    "top",
    `Please set your transaction PIN first.`,
    () => null,
    "danger",
    alertCircle
   );
   router.push("/set-pin", "forward", "replace");
   return;
  }

  // Validation checks...
  if (Object.keys(vendor).length === 0) {
   presentToast(
    "top",
    "Please choose a vendor.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  if (Object.keys(packages).length === 0) {
   presentToast(
    "top",
    "Please choose a package.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }

  if (Object.keys(decDetails).length === 0 && vendor.serviceID == "jamb") {
   presentToast(
    "top",
    "Please verify JAMB profile number first.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }

  if (+packages.variation_amount * +quantity > +vtpBalance) {
   await reportLowBalance(
    +packages.variation_amount * +quantity,
    "Vtpass",
    +vtpBalance
   );
   presentToast(
    "top",
    `Service not available at the moment.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }

  if (+packages.variation_amount * +quantity > +userInfo?.ngn_balance) {
   presentToast(
    "top",
    `You do not have sufficient funds in your wallet.`,
    () => null,
    "danger",
    alertCircle
   );
   router.push("/deposit", "forward", "replace");
   return;
  }

  if (+pin !== +userInfo.tx_pin) {
   presentToast("top", `Incorrect PIN!`, () => null, "danger", alertCircle);
   return;
  }
  setBuyDetails({});
  const id = generateRequestId();
 
   const result = await apiRequest(
  "POST",
  "", //url
{
 action: "vtp_pay_education",
     serviceID: vendor.serviceID,
     amount: packages.variation_amount.toString(),
     request_id: id,
     billersCode: decNumber,
     variation_code: packages.variation_code,
     phone: userInfo.phone,
     quantity: quantity.toString(),
     email: userInfo.email,
},
  true,       // require auth
  false   // show success or error messages
  
) as any;

 if (
    result.success &&
    (result.data.code === "000" || result.data.code === "099")
   ) {
    const vtpassData = result.data;
    setBuyDetails(vtpassData);
    setVendor({});
    setDecDetails({});
    setPackages({});
    setVariations({});

    presentToast(
     "top",
     `Your purchase was successful. We will email you as soon as it is processed.`,
     () => null,
     "success",
     checkmarkCircle
    );
   } else {
    presentToast("top", result.message, () => null, "danger", alertCircle);

   }

 
  await context.getUserInfo();
  await context.getTransactions();
 };

 const getToken = (str: string) => {
  const tokenArray = str.split(" ");
  if (tokenArray.length === 3) {
   return tokenArray[2];
  } else if (tokenArray.length === 2) {
   return tokenArray[1];
  }
  if (tokenArray.length === 1) {
   return tokenArray[0];
  } else {
   return null;
  }
 };

 return (
  <IonPage>
  
   <AppShell showBack={true} showLogo={false} title={'Pay for Education'}>
    <IonLoading
     isOpen={busy}
     message="Please wait..."
     spinner="circles"
     className="custom-loading"
    />
    {vendors.length > 0 && (
     <div className="ion-text-center">
      <p>
       <strong>{settings?.app_name}</strong> lets you pay education bills on{" "}
       {vendors.length} vendors. Choose your prefered vendor to get started.
      </p>
     </div>
    )}

    <IonList
     className="ion-margin-vertical"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      {vendor && (
       <div className="ion-text-center ion-margin">
        <img src={vendor.image} height={60} />
       </div>
      )}
      <IonSelect
       //interface="popover"
       label="Choose a vendor"
       labelPlacement="floating"
       value={vendor}
       onIonChange={(e) => setVendor(e.detail.value)}
      >
       {vendors.map((v: any, i: number) => (
        <IonSelectOption key={i} value={v}>
         {v.name}
        </IonSelectOption>
       ))}
      </IonSelect>
     </IonItem>
    </IonList>

    {variations.length > 0 && (
     <>
      <IonList
       className="ion-margin-bottom"
       style={{ border: "1px solid darkorange" }}
      >
       <IonItem>
        <IonSelect
         labelPlacement="floating"
         placeholder="Chose package"
         //  interface="popover"
         label="Chose package"
         value={packages}
         onIonChange={(e) => setPackages(e.detail.value)}
        >
         {variations.map((plan: any, index: number) => (
          <IonSelectOption key={index} value={plan}>
           {plan.name}
          </IonSelectOption>
         ))}
        </IonSelect>
       </IonItem>
       {vendor.serviceID !== "jamb" && (
        <IonItem>
         <IonSelect
          labelPlacement="floating"
          placeholder="Chose quantity"
          //  interface="popover"
          label="Chose quantity"
          value={quantity}
          onIonChange={(e) => setQuantity(e.detail.value)}
         >
          {quantities.map((option) => (
           <IonSelectOption key={option} value={option}>
            {option}
           </IonSelectOption>
          ))}
         </IonSelect>
        </IonItem>
       )}
      </IonList>
     </>
    )}

    {variations.length > 0 && vendor.serviceID == "jamb" && (
     <>
      <IonList
       className="ion-margin-bottom"
       style={{ border: "1px solid darkorange" }}
      >
       <IonItem>
        {/*HIDE ON SHOWMAX*/}
        <IonInput
         label={`Enter profile ID from JAMB website`}
         labelPlacement="floating"
         placeholder="123456"
         value={decNumber}
         onIonInput={(e) => setDecNumber(e.detail.value || "")}
        ></IonInput>
       </IonItem>
      </IonList>
      <div className="ion-text-center">
       <IonButton color="danger" onClick={verifyDecNumber}>
        Verify profile ID
       </IonButton>
      </div>
     </>
    )}

    {Object.keys(decDetails).length > 0 && vendor.serviceID == "jamb" && (
     <>
      <IonList>
       {decDetails.Customer_Name != null && (
        <IonItem>
         <IonLabel slot="start">Customer Name:</IonLabel>
         <IonLabel slot="end">{decDetails.Customer_Name}</IonLabel>
        </IonItem>
       )}
      </IonList>
     </>
    )}
    {Object.keys(packages).length > 0 && (
     <>
      <IonButton
       className="ion-margin-vertical"
       expand="block"
       onClick={() => setPinModal(true)}
      >
       PAY{" "}
       {Object.keys(packages).length > 0 &&
        "₦" + formatNumber((+packages.variation_amount * +quantity).toString())}
      </IonButton>
     </>
    )}

    {Object.keys(buyDetails).length > 0 && (
     <>
      <h1 className="ion-text-center">PURCHASE DETAILS</h1>
      <IonList>
       <IonRow>
        <IonCol size="5">Name:</IonCol>
        <IonCol size="7">{buyDetails.content.transactions.product_name}</IonCol>
       </IonRow>

       {buyDetails.content.transactions.quantity && (
        <IonRow>
         <IonCol size="5">Quantity:</IonCol>
         <IonCol size="7">{buyDetails.content.transactions.quantity}</IonCol>
        </IonRow>
       )}

       {buyDetails.content.transactions.unit_price && (
        <IonRow>
         <IonCol size="5">Unit Price:</IonCol>
         <IonCol size="7">
          ₦{formatNumber(buyDetails.content.transactions.unit_price)}
         </IonCol>
        </IonRow>
       )}

       {buyDetails.content.transactions.convinience_fee !== null && (
        <IonRow>
         <IonCol size="5">Convenience Fee:</IonCol>
         <IonCol size="7">
          ₦{formatNumber(buyDetails.content.transactions.convinience_fee)}
         </IonCol>
        </IonRow>
       )}

       <IonRow>
        <IonCol size="5">Total Amount:</IonCol>
        <IonCol size="7">₦{formatNumber(buyDetails.amount)}</IonCol>
       </IonRow>

       <IonRow>
        <IonCol size="5">Status:</IonCol>
        <IonCol size="7">{buyDetails.content.transactions.status}</IonCol>
       </IonRow>

       {buyDetails.tokens &&
        buyDetails.tokens.length > 0 &&
        buyDetails.tokens.map((pin: any, i: number) => (
         <IonRow key={i}>
          <IonCol size="3">PIN {i + 1}:</IonCol>
          <IonCol size="9">
           {pin}
           <IonButton fill="clear" onClick={() => copy(pin)}>
            <IonIcon icon={copyOutline}></IonIcon>
           </IonButton>
          </IonCol>
         </IonRow>
        ))}
       {buyDetails.cards &&
        buyDetails.cards.length > 0 &&
        buyDetails.cards.map((pin: any, i: number) => (
         <IonRow key={i}>
          <IonCol size="3">Card {i + 1}:</IonCol>
          <IonCol size="9">
           <IonRow>
            <IonCol size="12">
             Pin: {pin.Pin}
             <IonButton fill="clear" onClick={() => copy(pin.Pin)}>
              <IonIcon icon={copyOutline}></IonIcon>
             </IonButton>
            </IonCol>
            <IonCol size="12">
             SN: {pin.Serial}
             <IonButton fill="clear" onClick={() => copy(pin.Serial)}>
              <IonIcon icon={copyOutline}></IonIcon>
             </IonButton>
            </IonCol>
           </IonRow>
          </IonCol>
         </IonRow>
        ))}
       {buyDetails.purchased_code && (
        <IonItem>
         <IonLabel slot="start">PIN:</IonLabel>
         <IonLabel slot="start">{getToken(buyDetails.purchased_code)}</IonLabel>
         <IonButton
          fill="clear"
          onClick={() => copy(getToken(buyDetails.purchased_code))}
         >
          <IonIcon icon={copyOutline}></IonIcon>
         </IonButton>
        </IonItem>
       )}
      </IonList>
     </>
    )}

    <div className="ion-text-center">
     <p>
      Need help? <IonRouterLink routerLink="/contact">GET HELP</IonRouterLink>
     </p>
    </div>
    <IonAlert
     isOpen={pinModal}
     header="Authorize Transaction"
     subHeader="Enter your PIN to authorize this transaction."
     className="pin-alert"
     buttons={[
      {
       text: "Cancel",
       cssClass: "alert-button-cancel",
       handler: () => {
        setCancel(true);
       },
      },
      {
       text: "Proceed",
       cssClass: "alert-button-confirm",

       handler: () => setCancel(false),
      },
     ]}
     inputs={[
      {
       type: "password",
       placeholder: "Enter PIN",
       attributes: {
        inputmode: "numeric",
        maxLength: 4,
       },
      },
     ]}
     onDidDismiss={(e) => {
      setPinModal(false);
      handlePay(e.detail.data.values[0]);
     }}
     backdropDismiss={false}
    ></IonAlert>
   </AppShell>
  </IonPage>
 );
};

export default PayEducation;