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

import {
 IonLabel,
 IonIcon,
 IonPage,
 IonRouterLink,
 IonButton,
 IonSelect,
 IonSelectOption,
 IonInput,
 IonList,
 IonItem,
 useIonRouter,
 IonLoading,
 IonAlert,
 IonRadioGroup,
} 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 PayElectricity: React.FC = () => {
  const amountInputRef = useRef<HTMLInputElement>(null);

 const [vendors, setVendors] = useState<any>([]);
 const [vendor, setVendor] = useState<any>({});
 const [meterDetails, setMeterDetails] = useState<any>({});
 const [buyDetails, setBuyDetails] = useState<any>({});
 const [packages, setPackages] = useState<string>("prepaid");
 const [meterNumber, setMeterNumber] = useState<string>("");
 const [amount, setAmount] = useState<string>("");
 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,
  presentToast,
  userInfo,
  vtpassApiKey,
  vtpassBase,
  vtpassPubKey,
  vtpBalance,
  settings,
  copy,
  reportLowBalance,
  busy,
  setBusy,
 
 } = 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;
  }
 };

 const verifyMeter = async () => {
  if (!meterDetails) {
   presentToast(
    "top",
    `Meter number is empty.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  if (Object.keys(vendor).length === 0) {
   presentToast(
    "top",
    `Please choose a vendor.`,
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  setMeterDetails({});
  setBuyDetails({});
    const result = await apiRequest(
  "POST",
  "", //url
{
 action: "verify_profile_id",
     serviceID: vendor.serviceID,
     type: packages,
     billersCode: String(meterNumber),
},
  false,       // require auth
  false,   // show success or error messages
  true
) as any;

 if (result?.success && result?.data && !result?.data.content?.error) {
   // console.log("verified", result.data);
    setMeterDetails(result.data.content);
   } else {
    //console.log("not verified", result.data);
    presentToast(
     "top",
     `${result.data?.content?.error || result.message}`,
     () => null,
     "danger",
     alertCircle
    );
   }
 };

 useEffect(() => {
  const fetchServices = async () => {
   try {
    const as = await fetchServiceID("electricity-bill");

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

 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 (!amount) {
   presentToast(
    "top",
    "Please enter an amount.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }

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

  if (+amount > +vtpBalance) {
   await reportLowBalance(+amount, "Vtpass", +vtpBalance);
   presentToast(
    "top",
    `Service not available at the moment.`,
    () => null,
    "danger",
    alertCircle
   );
   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_electricity",
     serviceID: vendor.serviceID,
     amount: amount,
     request_id: id,
     billersCode: meterNumber,
     variation_code: packages,
     phone: userInfo.phone,
     email: userInfo.email,
},
  true,       // require auth
  false,   // show success or error messages
  true //loading
) as any;

 if (
    result?.success &&
    (result?.data.code === "000" || result?.data.code === "099")
   ) {
    const vtpassData = result.data;

    setBuyDetails(vtpassData);
    setVendor({});
    setMeterDetails({});
    setPackages("prepaid");

    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);

   }
 };

 const getToken = (str: string) => {
  return str;
  /*
  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>
      <IonLoading
     isOpen={busy}
     message="Please wait..."
     spinner="circles"
     className="custom-loading"
    />
   <AppShell showBack={true} showLogo={false} title={'Buy Electricity'}>

 
    {vendors.length > 0 && (
     <div className="ion-text-center">
      <p>
       <strong>{settings?.app_name}</strong> lets you pay electricity 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>
    {Object.keys(vendor).length > 0 && (
     <>
  <IonRadioGroup
  value={packages}
  className="meter-ui-group"
>
  <IonLabel className="meter-ui-title">
    Select Meter Type
  </IonLabel>

  <div className="meter-ui-grid">

    {/* PREPAID */}
    <div
      className={`meter-ui-card ${packages === "prepaid" ? "active" : ""}`}
      onClick={() => setPackages("prepaid")}
    >
      <div className="meter-ui-content">
        <div className="meter-ui-heading">Prepaid</div>
        <div className="meter-ui-sub">Pay before use</div>
      </div>
    </div>

    {/* POSTPAID */}
    <div
      className={`meter-ui-card ${packages === "postpaid" ? "active" : ""}`}
      onClick={() => setPackages("postpaid")}
    >
      <div className="meter-ui-content">
        <div className="meter-ui-heading">Postpaid</div>
        <div className="meter-ui-sub">Pay after use</div>
      </div>
    </div>

  </div>
</IonRadioGroup>

      <IonList
       className="ion-margin-bottom"
       style={{ border: "1px solid darkorange" }}
      >
       <IonItem>
        <IonInput
         label="Enter meter/account number"
         labelPlacement="floating"
         placeholder="123456"
         value={meterNumber}
         onIonInput={(e) => setMeterNumber(e.detail.value || "")}
        ></IonInput>
       </IonItem>
      </IonList>
      <div className="ion-text-center">
       <IonButton color="danger" onClick={verifyMeter}>
        Verify meter number
       </IonButton>
      </div>
     </>
    )}

    {Object.keys(meterDetails).length > 0 && (
     <IonList>
      {meterDetails.Customer_Name && (
       <IonItem>
        <IonLabel slot="start">Customer Name:</IonLabel>
        <IonLabel slot="end">{meterDetails.Customer_Name}</IonLabel>
       </IonItem>
      )}
      {meterDetails.Address && (
       <IonItem>
        <IonLabel slot="start">Address:</IonLabel>
        <IonLabel slot="end">{meterDetails.Address}</IonLabel>
       </IonItem>
      )}
      {meterDetails.District && (
       <IonItem>
        <IonLabel slot="start">District:</IonLabel>
        <IonLabel slot="end">{meterDetails.District}</IonLabel>
       </IonItem>
      )}
      {meterDetails.Customer_District && (
       <IonItem>
        <IonLabel slot="start">District:</IonLabel>
        <IonLabel slot="end">{meterDetails.Customer_District}</IonLabel>
       </IonItem>
      )}
      {meterDetails.Meter_Number && (
       <IonItem>
        <IonLabel slot="start">Meter Number:</IonLabel>
        <IonLabel slot="end">{meterDetails.Meter_Number}</IonLabel>
       </IonItem>
      )}
      {meterDetails.Account_Number && (
       <IonItem>
        <IonLabel slot="start">Account Number:</IonLabel>
        <IonLabel slot="end">{meterDetails.Account_Number}</IonLabel>
       </IonItem>
      )}
     </IonList>
    )}
    {Object.keys(meterDetails).length > 0 && (
     <>
     {/* AMOUNT INPUT SECTION */}
<div className="amount-ui-wrapper">
  <div className="amount-ui-label">Enter Amount</div>

  <div
    className="amount-ui-card"
    onClick={() => amountInputRef.current?.focus()}
  >
    <div className="amount-ui-display">
      <span className="amount-ui-currency">₦</span>

      <input
        ref={amountInputRef}
        type="number"
        inputMode="decimal"
        className="amount-ui-input"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="0.00"
      />
    </div>

    <div className="amount-ui-balance">
      Balance: <strong>₦{formatNumber(userInfo?.ngn_balance)}</strong>{" "}
      <span className="amount-ui-balance-muted">(Available)</span>
    </div>
  </div>
</div>

    
      <IonButton expand="block" onClick={() => setPinModal(true)}>
       PAY {amount && "₦" + formatNumber(amount)}
      </IonButton>
     </>
    )}
    {Object.keys(buyDetails).length > 0 && (
     <>
      <h1 className="ion-text-center">PURCHASE DETAILS</h1>
      <IonList>
       {buyDetails.customerName && (
        <IonItem>
         <IonLabel slot="start">Name:</IonLabel>
         <IonLabel slot="start">{buyDetails.customerName}</IonLabel>
        </IonItem>
       )}
       {buyDetails.Name && (
        <IonItem>
         <IonLabel slot="start">Name:</IonLabel>
         <IonLabel slot="start">{buyDetails.Name}</IonLabel>
        </IonItem>
       )}
       {buyDetails.customerAddress && (
        <IonItem>
         <IonLabel slot="start">Address:</IonLabel>
         <IonLabel slot="start">{buyDetails.customerAddress}</IonLabel>
        </IonItem>
       )}
       {buyDetails.Address && (
        <IonItem>
         <IonLabel slot="start">Address:</IonLabel>
         <IonLabel slot="start">{buyDetails.Address}</IonLabel>
        </IonItem>
       )}
       <IonItem>
        <IonLabel slot="start">Amount:</IonLabel>
        <IonLabel slot="start">{formatNumber(buyDetails.amount)}</IonLabel>
       </IonItem>
       {buyDetails.balance != null && (
        <IonItem>
         <IonLabel slot="start">Balance:</IonLabel>
         <IonLabel>{buyDetails.balance}</IonLabel>
        </IonItem>
       )}
       {buyDetails.purchased_code && (
        <IonItem>
         <IonLabel slot="start">PIN:</IonLabel>
         <IonLabel slot="start">{getToken(buyDetails.purchased_code)}</IonLabel>
         <IonButton
          fill="clear"
          onClick={() => copy(getToken(buyDetails.token))}
         >
          <IonIcon icon={copyOutline}></IonIcon>
         </IonButton>
        </IonItem>
       )}
       {buyDetails.units && (
        <IonItem>
         <IonLabel slot="start">Units:</IonLabel>
         <IonLabel slot="start">{buyDetails.units}</IonLabel>
        </IonItem>
       )}
       {buyDetails.PurchasedUnits && (
        <IonItem>
         <IonLabel slot="start">Units:</IonLabel>
         <IonLabel slot="start">{buyDetails.PurchasedUnits}</IonLabel>
        </IonItem>
       )}

       {buyDetails.tariff && (
        <IonItem>
         <IonLabel slot="start">Tariff:</IonLabel>
         <IonLabel>{buyDetails.tariff}</IonLabel>
        </IonItem>
       )}
       {buyDetails.TariffRate && (
        <IonItem>
         <IonLabel slot="start">Tariff Rate:</IonLabel>
         <IonLabel>{buyDetails.TariffRate}</IonLabel>
        </IonItem>
       )}
       {buyDetails.MeterCategory && (
        <IonItem>
         <IonLabel slot="start">Meter Category:</IonLabel>
         <IonLabel>{buyDetails.MeterCategory}</IonLabel>
        </IonItem>
       )}
       {buyDetails.MeterNumber && (
        <IonItem>
         <IonLabel slot="start">Meter Number:</IonLabel>
         <IonLabel>{buyDetails.MeterNumber}</IonLabel>
        </IonItem>
       )}
       {buyDetails.content.transactions.product_name && (
        <IonItem>
         <IonLabel slot="start">Product Name:</IonLabel>
         <IonLabel>{buyDetails.content.transactions.product_name}</IonLabel>
        </IonItem>
       )}
       {buyDetails.content.transactions.type && (
        <IonItem>
         <IonLabel slot="start">Type:</IonLabel>
         <IonLabel>{buyDetails.content.transactions.type}</IonLabel>
        </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: (value) => {
       //   handlePinChange(value.value);
       //    },
       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 PayElectricity;