"use client";

import { Carousel, Typography } from "@material-tailwind/react";

import aiX1BannerImage from "../../public/img/ai-x1-banner.png";
import gen3BannerImage from "../../public/img/gen3-image.png";
import smartPayChoseIcon from "../../public/img/smart-pay-chose.png";
import smartPayEasyIcon from "../../public/img/smart-pay-easy.png";
import smartPayPaymentIcon from "../../public/img/smart-pay-payment.png";
import { CATEGORY_FOR_SUBSCRIPTION } from "../constants/app";
import { FeatureCodes } from "../constants/feature-flags";
import { useMainContext } from "../contexts/MainWrapperContext";
import CustomNextImage from "./CustomNextImage";
import SubscriptionBanner from "./SubscriptionBanner";

export type HomeBannersProps = {
  isSubscriptionActive: boolean;
  onCategoryChange: (categoryCode: string) => void;
};

export default function HomeBanners({
  isSubscriptionActive,
  onCategoryChange,
}) {
  const { featureFlags } = useMainContext();

  const renderNote = () => {
    return (
      <Typography variant="small" className="text-white text-xs">
        * Check the terms and conditions for details about the offer and timing
        to keep it active.
      </Typography>
    );
  };
  const renderNoteGen3 = () => {
    return (
      <Typography variant="small" className="text-white text-xs">
        *Complete your order within the activation period to keep your rewards
        active.
      </Typography>
    );
  };

  return (
    <div className="relative mb-5">
      <Carousel
        autoplay={true}
        nextArrow={() => {}}
        prevArrow={() => {}}
        loop={true}
        className="rounded-xl"
        navigation={({ setActiveIndex, activeIndex, length }) => (
          <div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
            {new Array(length).fill("").map((_, i) => (
              <span
                key={i}
                className={`block h-1 cursor-pointer rounded-2xl transition-all content-[''] ${
                  activeIndex === i ? "w-8 bg-white" : "w-4 bg-white/50"
                }`}
                onClick={() => setActiveIndex(i)}
              />
            ))}
          </div>
        )}
      >
        {featureFlags?.[FeatureCodes?.GEN_3_EXTENSION_HOME_DIALOG]
          ?.isActive && (
          <div className="rounded-xl h-[270px] sm:h-[200px] gen3Banner px-4 md:px-8  flex flex-wrap gap-2 md:flex-nowrap   justify-center md:justify-between">
            <div className="flex flex-col justify-center text-center xl:text-start h-full">
              <Typography
                variant="paragraph"
                className="mb-2 text-white text-lg xl:text-2xl uppercase"
              >
                <span className="font-bold">The Wait Is Over -</span>{" "}
                <span className="font-semibold">
                  {" "}
                  Get Your AiX1 Home Station!
                </span>
              </Typography>
              <Typography
                variant="small"
                className="text-white  text-xs md:text-sm font-bold"
              >
                Step into the new era of decentralized performance.
              </Typography>
              <Typography
                variant="small"
                className="text-white text-xs md:text-sm"
              >
                Order your AiX1 Home Station today and enhance your
                participation —
              </Typography>
              <Typography
                variant="small"
                className="text-white text-xs md:text-sm"
              >
                boosting your ecosystem rewards by up to 20%.
              </Typography>
              <Typography
                variant="small"
                className="text-white font-bold text-xs md:text-sm"
              >
                Connect. Power. Elevate.
              </Typography>
              <div className="md:hidden mt-2 text-center">
                <div className="flex justify-center ">
                  <CustomNextImage
                    src={gen3BannerImage.src}
                    alt={"gen3BannerImage"}
                    width={100}
                    height={40}
                  />
                </div>

                {renderNoteGen3()}
              </div>
            </div>
            <div className="h-full hidden  md:flex md:flex-col md:justify-center md:text-center">
              <CustomNextImage
                src={gen3BannerImage.src}
                alt={"gen3BannerImage"}
              />
              {renderNoteGen3()}
            </div>
          </div>
        )}

        {featureFlags?.[FeatureCodes?.AI_CATEGORY]?.isActive && (
          <div className="rounded-xl h-[270px] sm:h-[200px] aiX1Banner px-4 md:px-8  flex flex-wrap gap-2 md:flex-nowrap  justify-between">
            <div className="flex flex-col justify-center text-center xl:text-start h-full">
              <Typography
                variant="paragraph"
                className="mb-2 text-white text-lg xl:text-4xl uppercase"
              >
                <span className="font-bold">Activate the Future</span> with AiX1
              </Typography>
              <Typography
                variant="small"
                className="text-white xl:w-[60%] text-xs md:text-sm"
              >
                Step into the next era of decentralized AI computing.
              </Typography>
              <Typography
                variant="small"
                className="text-white xl:w-[60%] text-xs md:text-sm"
              >
                Buy your AiX1 Server and connect* your AiX1 Home Station to
                unlock the full ecosystem, rewards, and unstoppable innovation.
              </Typography>
              <Typography
                variant="small"
                className="text-white font-bold xl:w-[60%] text-xs md:text-sm"
              >
                One Server. One Station. One Power.
              </Typography>
              <div className="md:hidden mt-2 text-center">
                <div className="flex justify-center ">
                  <CustomNextImage
                    src={aiX1BannerImage.src}
                    alt={"aiX1BannerImage"}
                    width={120}
                    height={50}
                  />
                </div>

                {renderNote()}
              </div>
            </div>
            <div className="h-full hidden  md:flex md:flex-col md:justify-center md:text-center">
              <CustomNextImage
                src={aiX1BannerImage.src}
                alt={"aiX1BannerImage"}
              />
              {renderNote()}
            </div>
          </div>
        )}

        {featureFlags?.[FeatureCodes?.SMART_PAY_PLAN]?.isActive && (
          <div className="rounded-xl h-[270px] sm:h-[200px] smartPayBanner px-4 md:px-8 flex flex-col justify-center text-center md:text-start">
            <Typography
              variant="paragraph"
              className="mb-2 text-white text-lg md:text-4xl uppercase"
            >
              <span className="font-bold">Own the Future</span> with SmartPay
            </Typography>
            <Typography
              variant="small"
              className="text-white md:w-[40%] text-xs md:text-sm"
            >
              tart Today with Just 20% — No Delays, No Complexity Get instant
              access to your Homnifi device.
            </Typography>
            <Typography
              variant="small"
              className="text-white font-bold md:w-[60%] text-xs md:text-sm"
            >
              SmartPay makes it simple—no hassle, just seamless participation.
            </Typography>
          </div>
        )}
        {featureFlags?.[FeatureCodes?.SMART_PAY_PLAN]?.isActive && (
          <div className="rounded-xl h-[270px] sm:h-[200px] smartPayBannerHow flex flex-wrap justify-between gap-1 px-[5%] py-[2%] xl:items-start ">
            <div className="flex-col justify-center align-middle text-center md:text-start md:flex-1 my-auto">
              <Typography
                variant="paragraph"
                className="mb-2 text-white text-lg font-bold md:text-2xl"
              >
                How Smart Plan Pay Works
              </Typography>
              <Typography
                variant="small"
                className="text-white md:w-[80%] text-xs md:text-sm"
              >
                Our Innovative payment plans makes premium machines accessible
                with minimal upfront cost.
              </Typography>
            </div>
            <div className="px-0 sm:px-2 flex flex-col justify-center text-center items-center md:flex-2">
              <CustomNextImage
                className="mb-2 "
                width={30}
                height={30}
                src={smartPayChoseIcon.src}
                alt="smart pay chose Icon"
              />
              <Typography
                variant="paragraph"
                className="text-white text-[10px] font-bold md:text-sm mb-[1px]"
              >
                Choose Machine
              </Typography>
              <Typography
                variant="paragraph"
                className="text-white hidden xl:block font-normal text-sm max-w-[200px]"
              >
                Browse our selection of SmartPay eligible machines with reduced
                upfront pricing and premium features
              </Typography>
            </div>
            <div className="px-0 sm:px-2 flex flex-col justify-center text-center items-center md:flex-2">
              <CustomNextImage
                className="mb-2 glassEffect"
                width={30}
                height={30}
                src={smartPayPaymentIcon.src}
                alt="smart pay chose Icon"
              />
              <Typography
                variant="paragraph"
                className="text-white text-[10px] font-bold md:text-sm"
              >
                Initial Payment
              </Typography>
              <Typography
                variant="paragraph"
                className="text-white hidden xl:block font-normal text-sm max-w-[200px]"
              >
                Pay just 20% of the machine price plus utility token. Get
                instant access to bonus LYK airdrops.
              </Typography>
            </div>
            <div className="px-0 sm:px-2 flex flex-col justify-center text-center items-center md:flex-2">
              <CustomNextImage
                className="mb-2 glassEffect"
                width={30}
                height={30}
                src={smartPayEasyIcon.src}
                alt="smart pay chose Icon"
              />
              <Typography
                variant="paragraph"
                className="text-white text-[10px] font-bold md:text-sm"
              >
                Easy Repayment
              </Typography>
              <Typography
                variant="paragraph"
                className="text-white hidden xl:block font-normal text-sm max-w-[220px]"
              >
                The remaining balance is automatically deducted from your future
                daily rewards of purchased machine, making repayments
                effortless.
              </Typography>
            </div>
          </div>
        )}

        <SubscriptionBanner
          callback={() => {
            onCategoryChange(CATEGORY_FOR_SUBSCRIPTION);
          }}
          isSubscriptionActive={isSubscriptionActive}
        />
      </Carousel>
    </div>
  );
}
