import {
  Dialog,
  DialogBody,
  DialogHeader,
  IconButton,
  Typography,
} from "@material-tailwind/react";
import React from "react";
import { IoIosCloseCircleOutline } from "react-icons/io";

import stopShippingImage from "../../public/img/stop-shipping-banner.png";
import {
  GREETING_DIALOG_STATUS,
  GREETING_DIALOG_STATUS_KEY,
} from "../../shared/constants/app";
import { FeatureCodes } from "../constants/feature-flags";
import { useMainContext } from "../contexts/MainWrapperContext";
import CustomNextImage from "./CustomNextImage";

export function HoldShippingDialog({ handleOpen, open }) {
  const { featureFlags } = useMainContext();
  return (
    <>
      <Dialog
        size="sm"
        open={open}
        handler={handleOpen}
        className=" px-3 xl:px-5  py-4 boostDialogBg"
        dismiss={{
          outsidePress: false,
          escapeKey: false,
        }}
      >
        <DialogHeader className="justify-center">
          <IconButton
            size="sm"
            variant="text"
            className="!absolute right-3 top-3 outline-none"
            onClick={async () => {
              await localStorage.setItem(
                GREETING_DIALOG_STATUS_KEY,
                GREETING_DIALOG_STATUS.seen,
              );
              handleOpen(false);
            }}
          >
            <IoIosCloseCircleOutline className="w-6 h-6 text-gray-500 cursor-pointer" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="max-h-[600px] overflow-y-auto">
          <div className="flex flex-wrap-reverse justify-center xl:justify-between items-center gap-3 mb-4">
            <div>
              <Typography
                variant="paragraph"
                className="text-lg md:text-4xl font-bold text-[#9451A0] uppercase"
              >
                Service Notice
              </Typography>
              <Typography
                variant="paragraph"
                className="text-base md:text-3xl text-black-900 mb-2 uppercase font-normal max-w-[330px]"
              >
                Shipping & Pickup Update
              </Typography>
              <Typography
                variant="paragraph"
                className="text-sm md:text-lg text-[#E27500] max-w-[200px] font-normal"
              >
                Effective July 17, 2025{" "}
              </Typography>
            </div>
            <div>
              <CustomNextImage
                src={stopShippingImage.src}
                alt={"boost image"}
                width={164}
                height={163}
              />
            </div>
          </div>
          <Typography
            variant="paragraph"
            className="text-base font-bold text-black-900 mb-4"
          >
            Please note the following{" "}
            <span className="text-[#9451A0]"> important update </span> regarding
            logistics services.
          </Typography>
          <div className="mb-4">
            <Typography
              variant="paragraph"
              className="text-sm text-black-900 mb-1 font-semibold"
            >
              🚫 Suspension of Shipping & Pickup
            </Typography>
            <Typography
              variant="paragraph"
              className="text-sm text-black-900 font-normal"
            >
              All shipping and pickup services are temporarily unavailable for:
            </Typography>
            <ul className="list-disc ml-6">
              <li className="decoration-slice">
                <Typography
                  variant="paragraph"
                  className="text-sm text-black-900 font-normal"
                >
                  GEN 1 Device Upgrades
                </Typography>
              </li>
              <li>
                <Typography
                  variant="paragraph"
                  className="text-sm text-black-900 font-normal"
                >
                  GEN 2 Device Orders
                </Typography>
              </li>
            </ul>
          </div>
          {featureFlags?.[FeatureCodes?.SMART_PAY_PLAN]?.isActive && (
            <div className="mb-4">
              <Typography
                variant="paragraph"
                className="text-sm text-black-900 mb-1 font-semibold"
              >
                ✅ SmartPay Machines
              </Typography>
              <Typography
                variant="paragraph"
                className="text-sm text-black-900 font-normal"
              >
                Shipping and pickup remain available for SmartPay device orders.
              </Typography>
            </div>
          )}

          <div className="mb-8">
            <Typography
              variant="paragraph"
              className="text-sm text-black-900 mb-1 font-semibold"
            >
              📌 Next Steps
            </Typography>
            <Typography
              variant="paragraph"
              className="text-sm text-black-900 font-normal"
            >
              Further details will be communicated shortly.
            </Typography>
          </div>

          <Typography
            variant="paragraph"
            className="text-base text-[#E27500] font-semibold"
          >
            Please monitor the platform for upcoming updates.
          </Typography>
        </DialogBody>
        {/* <DialogFooter className="justify-center">
                </DialogFooter> */}
      </Dialog>
    </>
  );
}
