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

import {
 IonContent,
 IonPage,
 IonCard,
 IonCardContent,
 IonItem,
 IonIcon,
 IonButton,
 IonCardTitle,
 IonRouterLink,
 IonHeader,
 IonToolbar,
 IonTitle,
 IonButtons,
 IonBackButton,
 IonLoading,
 useIonRouter,
} from "@ionic/react";
import {
 personOutline,
 lockClosedOutline,
 arrowBackOutline,
 alertCircle,
 checkmarkCircle,
 eye,
 eyeOff,
} from "ionicons/icons";

import "./Login.css";
//import logo from "/assets/logo/vinpace.png";
import { Context } from "../context/contex";

const Login: React.FC = () => {
 const [identity, setIdentity] = useState("");
 const [pass, setPass] = useState("");
 const [showPin, setShowPin] = useState(false);
 const [code, setCode] = useState('');
 const [step, setStep] = useState(1);

 const context = useContext(Context);
 const router = useIonRouter();

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

 const {
  storage,
  presentToast,
  setBusy,
  setValidUser,
  apiRequest,
  abr,
  busy
 } = context;

 const logIn = async () => {
  //  console.log("Error:", pass);
  if (!identity || !pass) {
   presentToast(
    "top",
    "Please fill all required fields.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  try {
   setBusy(true);
     const data = await apiRequest(
  "POST",
  "", //url
  {
   action: "user_login",
     identifier: identity,
     pass: pass,
   
  },
  false,       // require auth
  true      // show success or error messages
) as any;

  if (data.success) {
  setStep(2);
     setBusy(false);

   }
 
  } catch (error: any) {
   setBusy(false);

   console.error("Error:", error);
  }
 };

  const logIn2 = async () => {
  //  console.log("Error:", pass);
  if (!identity || !code) {
   presentToast(
    "top",
    "Please fill all required fields or start afresh.",
    () => null,
    "danger",
    alertCircle
   );
   return;
  }
  try {
   setBusy(true);
     const data = await apiRequest(
  "POST",
  "", //url
  {
   action: "user_login_2",
     identifier: identity,
    code: code,
   
  },
  false,       // require auth
  true      // show success or error messages
) as any;

  if (!data.success) {
  
    // console.error("Error:", data.error);
   } else {
    await storage?.set(abr+"_auth_token", data.token);
    await storage?.set(abr+"_token_expiry", data.expiry);
    await storage?.set(abr+"_email_address", data.email);
    await storage?.set(abr+"_tx_pin", data.pin);
    setValidUser(true);
    presentToast("top", data.message, () => null, "success", checkmarkCircle);
    setBusy(false);
    setTimeout(() => window.location.replace("home"), 1000);
   }
 
  } catch (error: any) {
   setBusy(false);

   console.error("Error:", error);
  }
 };

 return (
  <IonPage>
   <IonHeader>
    <IonToolbar className="nobg ion-padding-horizontal">
     <IonButtons slot="start">
      <IonBackButton
       text=""
       icon={arrowBackOutline}
       defaultHref="/"
      ></IonBackButton>
     </IonButtons>
     <IonTitle>Sign in</IonTitle>
     <IonRouterLink slot="end" routerLink="/register">
      REGISTER
     </IonRouterLink>
    </IonToolbar>
   </IonHeader>
   <IonContent fullscreen className="ion-content-bg">
      <IonLoading
         isOpen={busy}
         message="Please wait..."
         spinner="circles"
         className="custom-loading"
        />
    <div className="ion-text-center">
        <img className="paynaire-logo logo" />

    
    </div>
    {step === 1 &&
    <div className="blue-background">
     <IonCard className="login-card">
      <IonCardTitle className="card-title">Please Login</IonCardTitle>

      <IonCardContent className="nobg">
       {/* Email / Phone Input */}
       <IonItem lines="none" className="nobg">
        <IonIcon slot="start" icon={personOutline} className="toggle-icon" />
        <input
         className="custom-input"
         type="text"
         placeholder="Email or phone"
         value={identity}
         onInput={(e) => setIdentity(e.currentTarget.value || "")}
        />
       </IonItem>

       <IonItem lines="none" className="nobg">
        <IonIcon
         slot="start"
         icon={showPin ? eyeOff : eye}
         onClick={() => setShowPin(!showPin)}
         className="toggle-icon "
        />
        <input
         placeholder="Enter password"
         className="custom-input"
         type={showPin ? "text" : "password"}
         value={pass}
         onInput={(e) => setPass(e.currentTarget.value || "")}
        />
       </IonItem>

       <IonRouterLink
        routerLink="/recover-password"
        className="forgot-password"
       >
        Forgot Password?
       </IonRouterLink>

       <IonButton expand="block" className="custom-login-btn" onClick={logIn}>
        Login
       </IonButton>
       <div className="create-account">
        <p>
         Don't have an account?{" "}
         <IonRouterLink routerLink="/register">Create Account</IonRouterLink>
        </p>
       </div>
      </IonCardContent>
     </IonCard>
    </div>
    }

     {step === 2 &&
    <div className="blue-background">
     <IonCard className="login-card">
      <IonCardTitle className="card-title">Verify Login</IonCardTitle>
<p className="ion-text-center">Enter the verification code sent to your email.</p>
      <IonCardContent className="nobg">
       {/* Email / Phone Input */}
       <IonItem lines="none" className="nobg">
        <IonIcon slot="start" icon={personOutline} className="toggle-icon" />
        <input
         className="custom-input"
         type="text"
         placeholder="Enter code"
         value={code!}
         onInput={(e) => setCode(e.currentTarget.value || '')}
        />
       </IonItem>

       <IonButton expand="block" className="custom-login-btn" onClick={logIn2}>
        Login
       </IonButton>
       <div className="create-account">
        <p>
         Don't have an account?{" "}
         <IonRouterLink routerLink="/register">Create Account</IonRouterLink>
        </p>
       </div>
      </IonCardContent>
     </IonCard>
    </div>
    }
   </IonContent>
  </IonPage>
 );
};

export default Login;