import React, { useState, useContext, useEffect } from "react";
import {
IonCard,
IonCardContent,
 IonContent,
IonCardHeader,
IonCardTitle,
 IonIcon,
 IonPage,
 IonText,

 IonButton,
 
 IonLoading,
 useIonRouter,

} from "@ionic/react";
import { formatNumber, formatCardNumber } from "../../utils";
import { arrowBackOutline, arrowForward, alertCircle, copyOutline, addCircle } from "ionicons/icons";
import { Context } from "../../context/contex";
import { FincraPayment } from "../../components/Pay/PaymentApi";
import axios from "axios";
import AppShell from "../../components/Header";

const Deposit: React.FC = () => {
 const context = useContext(Context);
 const [amount, setAmount] = useState<string>("");
 const [depositTotal, setDepositTotal] = useState<number>(0);
 const [depositFee, setDepositFee] = useState<number>(0);

 const [amountUSD, setAmountUSD] = useState<string>("");
 const [pinModal, setPinModal] = useState(false);
 const [cancel, setCancel] = useState(false);
 const router = useIonRouter();
 const [selectedCurrency, setSelectedCurrency] = useState<string>("NGN");
 const [ngnMethod, setNgnMethod] = useState<string>("");
 const [usdMethod, setUsdMethod] = useState<string>("");
  const [info, setInfo] = useState<any[] | null>(null);

 if (!context) {
  return <div>Loading...</div>;
 }

 const {
  apiURL,
  settings,
  presentToast,
  userInfo,
  ngnRates,
  busy,
  setBusy,
  storage,
  apiRequest,
abr,
copy
 } = context;

   const getUserInfo = async () => {
  const token = await storage?.get(abr+"_auth_token");

  if (!token) {
  // setValidUser(false);
   return false;
  }

  try {
   const response = await fetch(apiURL, {
    method: "POST",
    headers: {
     "Content-Type": "application/x-www-form-urlencoded",
     Authorization: `Bearer ${token}`,
    },
    body: new URLSearchParams({
     action: "get_user_info",
    }),
   });

   if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);

   const data = await response.json();

   if (data.error) {
    console.warn("Session invalid:", data.error);
    //await logOut();
    return false;
   } else {
    setInfo(data[0]);
   // setValidUser(true);
   }
  } catch (error: any) {
   console.error("Error:", error?.message);
  }
 };
 
  useEffect(() => {
   const interval = setInterval(() => {
    getUserInfo();
   }, 5000); // every 5 seconds
 
   return () => clearInterval(interval); // cleanup on unmount
  }, [storage]);

  const generateAccount = () => {
  if (!userInfo) {
      presentToast(
         "top",
         "Invalid user!",
         () => null,
         "danger",
         alertCircle
        );
        return;
  }
    if (+userInfo?.id_verified !== 1) {
      presentToast(
         "top",
         "Please verify your Identity first!",
         () => null,
         "danger",
         alertCircle
        );
           router.push("/kyc", "forward", "replace");

        return;
  }
   const res =  apiRequest(
    "POST",
    "",
    { action: 'generate_deposit_account'},
    true,
    true
  ) as any;
   if (res?.success) {
context.getUserInfo();
  }
};

 return (
<IonPage>
  <AppShell showBack showLogo={false} title="Deposit">

    <IonLoading
      isOpen={busy}
      message="Processing..."
      spinner="circles"
      className="custom-loading"
    />

    <IonContent className="deposit-page">

      {/* ===== BALANCE HERO ===== */}
      <div className="deposit-hero">
        <img src="assets/images/naira.png" className="deposit-hero-icon" />

        <div className="deposit-hero-text">
          <h2>Fund Your Naira Wallet</h2>
          <p className="deposit-balance">
            ₦{formatNumber((info as any)?.ngn_balance, 2)}
          </p>
          <span className="deposit-balance-label">Current Balance</span>
        </div>
      </div>

      {/* ===== INFO ===== */}
      <IonCard className="deposit-info-card">
        <IonCardContent>
          <IonText>
            Transfer money from any Nigerian bank to the account below.
            Your <strong>{settings?.app_name}</strong> wallet will be credited
            automatically once payment is received.
          </IonText>
        </IonCardContent>
      </IonCard>

      {/* ===== ACCOUNT DETAILS ===== */}
      {userInfo?.deposit_account && (
        <IonCard className="deposit-account-card">

          <IonCardHeader>
            <IonCardTitle>Bank Account Details</IonCardTitle>
          </IonCardHeader>

          <IonCardContent>

            {/* ACCOUNT NUMBER */}
            <div className="deposit-field">
              <label>Account Number</label>
              <div className="deposit-field-row">
                <span>{formatCardNumber(userInfo.deposit_account)}</span>
                <IonIcon
                  icon={copyOutline}
                  onClick={() => copy(userInfo.deposit_account)}
                />
              </div>
            </div>

            {/* ACCOUNT NAME */}
            <div className="deposit-field">
              <label>Account Name</label>
              <span>{userInfo.first_name} {userInfo.last_name}</span>
            </div>

            {/* BANK */}
            <div className="deposit-field">
              <label>Bank</label>
              <span>Safe Haven MFB</span>
            </div>

          </IonCardContent>
        </IonCard>

      ) 
     }
      {!userInfo?.deposit_account && (
        /* ===== EMPTY STATE ===== */
        <IonCard className="deposit-empty-card">
          <IonCardContent className="ion-text-center">

            <img src="assets/images/fly.gif" height={90} />

            <h3>No Deposit Account Yet</h3>
            <p>
              Generate a dedicated bank account to start funding your wallet.
            </p>

            <IonButton
              expand="block"
              color="primary"
              onClick={generateAccount}
            >
              <IonIcon slot="start" icon={addCircle} />
              Create Deposit Account
            </IonButton>

          </IonCardContent>
        </IonCard>
      )}

    </IonContent>
  </AppShell>
</IonPage>

 );
};

export default Deposit;