import React, { useEffect, useState } from "react";
import cx from "classnames";
import Image from "antd/lib/image";
import { ArrowRightOutlined } from "@ant-design/icons";
import styles from "./mobileHeader.module.scss"; // adjust path as needed
import MobileSideMenu from "../mobileSideMenu/MobileSideMenu";
import PincodeModal from "../../../modal/pincode/PincodeModal";
import OTPModal from "../../../modal/otpModal/OTPModal";
import NewModalSignIn from "../../../modal/newModalSignIn/NewModalSignIn";
import { useRouter } from "next/router";
import _ from "lodash";
import Router from "next/router";
// import MobileSideMenu, PincodeModal, OTPModal, NewModalSignIn etc.

const MobileHeader: React.FC<any> = (props) => {
  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
  const [isMobileOTPModalVisible, setIsMobileOTPModalVisible] = useState(false);
  const [isRFQModalVisible, setIsRFQModalVisible] = useState(false);
  const [loginRes, setLoginRes] = useState<any>({});
  // handlers from your original code: home, rfq, handleOk, handleCancel, etc.
   const router = useRouter();
  const rfq = (): any => {
    if (_.isEmpty(loginRes)) {
      setIsOTPModalVisible(!isOTPModalVisible);
    } else {
      Router.push("/rfq");
    }
  };

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const tokenData: any = !_.isEmpty(details) ? details.token : null;
    
  }, []);

  const handleOTPClose = () => {
    setIsOTPModalVisible(false);
    setIsRFQModalVisible(false);
  };

  // const [cart, setCart] = useState(0);
  const home = (): any => {
    router.push({
      pathname: `/home`,
    });
  };
  return (
    <>
      <div
        className={
          props.home
            ? styles.MobileHeaderContainerHome
            : styles.MobileHeaderContainer
        }
      >
        {/* Top support bar */}
        <div
          className={styles.topSupportBar}
          style={{
            background:
              "linear-gradient(90deg, #F3465F 0%, #C5374C 50%, #FF7BA5 100%)",
            color: "#fff",
            fontSize: "18px",
            fontWeight: 400,
          }}
        >
          <span style={{ fontWeight: 400 }}>24/7 Customer Support</span>
          <span style={{ fontSize: "14px" }}>
            For any query, email us at{" "}
            <a
              href="mailto:contact@indispare.com"
              style={{ color: "#fff", textDecoration: "underline" }}
            >
              contact@indispare.com
            </a>{" "}
            or call us on{" "}
            <a
              href="tel:+918977028189"
              style={{ color: "#fff", textDecoration: "underline" }}
            >
              +91 8977028189
            </a>
          </span>
        </div>

        {/* Main header row */}
        <div className={styles.displayContainer}>
          <button
            className={cx(
              "ant-col ant-col-sm-14 cursor-pointer",
              styles.logoButton
            )}
            onClick={home}
            aria-label="Go to home"
          >
            <Image
              src={"/images/logo-new-home.svg"}
              alt="siteLogo"
              preview={false}
              style={{
                display: "block",
                width: "100%",
                height: "auto",
                maxWidth: 120,
                maxHeight: 50,
              }}
            />
          </button>

          <div
            className={cx("ant-col ant-col-sm-10", styles.mobileHeaderIcons)}
          >
            <button
              className={cx(styles.mobileCard, styles.rfqbtn)}
              onClick={rfq}
              aria-label="Request for quote"
            >
              RFQ 
            </button>

            <button
              className={styles.shopBtn}
              onClick={() =>
                window.open(
                  "https://express.sparts.click/",
                  "_blank",
                  "noopener,noreferrer"
                )
              }
              aria-label="Shop Instantly"
            >
              Shop Instantly
            </button>

            <button
              onClick={() => setIsDrawerVisible(true)}
              className={cx(styles.mobileCard, styles.menuBtn)}
              aria-label="Open menu"
            >
              <Image
                preview={false}
                width={24}
                height={24}
                src={"/images/HomepageIcons/icon_menu.svg"}
                alt="icon_menu"
              />
            </button>
          </div>
        </div>

        {/* Side menu and modals */}
        <MobileSideMenu
          isDrawerVisible={isDrawerVisible}
          onClose={() => setIsDrawerVisible(false)}
          width={300}
        />

        <OTPModal
          handleOTPClose={() => setIsOTPModalVisible(false)}
          page={"home"}
          isOTPModalVisible={isOTPModalVisible}
          stateArray={props?.stateArray}
        />

        <NewModalSignIn
          handleMobileClose={() => setIsMobileOTPModalVisible(false)}
          isMobileOTPModalVisible={isMobileOTPModalVisible}
        />
      </div>
    </>
  );
};

export default MobileHeader;