import React, { useEffect, useState } from "react";
import Link from "next/link";

const textstackSize = $(textstackSize:Dropdown[XXXL|XXXL,XXL|XXL,XL|XL,L|L,M|M,S|S,XS|XS]="XXL");

// group { Headline }
const copyHeadlineText = $(copyHeadlineText:RichText);
const copyHeadlineFont = $(copyHeadlineFont:Dropdown[Proxima Nova|proxima-nova,Roboto|Roboto,Bakersfield|Bakersfield]="proxima-nova");
// endgroup

// group { subline }
const copySublineText = $(copySublineText:RichText);
const copySublineText2 = $(copySublineText2:RichText);
const copySublineFont = $(copySublineFont:Dropdown[Proxima Nova|proxima-nova,Roboto|Roboto,Bakersfield|Bakersfield]="proxima-nova");
// endgroup

// group { CTA }
const ctaTitle = $(ctaTitle:RichText);
const ctaLocation = $(ctaLocation:Link="https://belk.com/coupons");
const ctaAdobeTag = $(ctaAdobeTag:String);
const ctaFont = $(ctaFont:Dropdown[Proxima Nova|proxima-nova,Roboto|Roboto,Bakersfield|Bakersfield]="proxima-nova");
const ctaBackgroundColor = $(ctaBackgroundColor:Color);
// endgroup

// group { Banner level settings }
const containerBackgroundImageSlug = $(containerBackgroundImageSlug:String="wk32_2025_newcms_homepage_coupon_fh_1");
const containerBackgroundMobileImageSlug = $(containerBackgroundMobileImageSlug:String);
const containerBackgroundColor = $(containerBackgroundColor:Color);
const layoutMode = $(layoutMode:Dropdown[Inset|inset,Full Width|full]="full");
const innerBackgroundColor = $(innerBackgroundColor:Color);
// endgroup

// group { Corner radius controls }
const roundedCornerTopLeft = $(roundedCornerTopLeft:Boolean="false");
const roundedCornerTopRight = $(roundedCornerTopRight:Boolean="false");
const roundedCornerBottomLeft = $(roundedCornerBottomLeft:Boolean="false");
const roundedCornerBottomRight = $(roundedCornerBottomRight:Boolean="false");
// endgroup

// group { Gutters }
const desktopHorizontalGutter = $(desktopHorizontalGutter:Dropdown[None|0,Tiny|1,Atomic|4,Micro|8,Little|16,Regular|32,Big|48,Huge|64,Mega|80]="16");

const mobileVerticalGutter = $(mobileVerticalGutter:Dropdown[None|0,Tiny|1,Atomic|4,Micro|8,Little|16,Regular|32,Big|48,Huge|64,Mega|80]="16");
const mobileHorizontalGutter = $(mobileHorizontalGutter:Dropdown[None|0,Tiny|1,Atomic|4,Micro|8,Little|16,Regular|32,Big|48,Huge|64,Mega|80]="16");
// endgroup

function buildS7Image(slug, preset) {
  return slug && preset
    ? `https://belk.scene7.com/is/${
        preset.includes("RAW") ? "content" : "image"
      }/Belk/${slug}?${preset}&bgc=0,0,0&color=0,0,0,0&fmt=png-alpha&opac=100`
    : null;
}

// Add the DesktopTextStack mapping after the existing utility functions
const DesktopTextStack = {
  XXXL: {
    headline: {
      size: "3xl",
      weight: "regular",
    },
    subline: {
      size: "l",
      weight: "thin",
    },
    subline2: {
      size: "9xl",
      weight: "semibold",
    },
    link: {
      size: "l",
      weight: "semibold",
    },
  },
  XXL: {
    headline: {
      size: "2xl",
      weight: "regular",
    },
    subline: {
      size: "xs",
      weight: "thin",
    },
    subline2: {
      size: "8xl",
      weight: "regular",
    },
    link: {
      size: "l",
      weight: "semibold",
    },
  },
  XL: {
    headline: {
      size: "xl",
      weight: "regular",
    },
    subline: {
      size: "s",
      weight: "thin",
    },
    subline2: {
      size: "7xl",
      weight: "semibold",
    },
    link: {
      size: "m",
      weight: "semibold",
    },
  },
  L: {
    headline: {
      size: "l",
      weight: "regular",
    },
    subline: {
      size: "s",
      weight: "thin",
    },
    subline2: {
      size: "6xl",
      weight: "semibold",
    },
    link: {
      size: "m",
      weight: "semibold",
    },
  },
  M: {
    headline: {
      size: "m",
      weight: "regular",
    },
    subline: {
      size: "s",
      weight: "thin",
    },
    subline2: {
      size: "5xl",
      weight: "semibold",
    },
    link: {
      size: "m",
      weight: "semibold",
    },
  },
  S: {
    headline: {
      size: "s",
      weight: "regular",
    },
    subline: {
      size: "xs",
      weight: "thin",
    },
    subline2: {
      size: "4xl",
      weight: "semibold",
    },
    link: {
      size: "s",
      weight: "semibold",
    },
  },
  XS: {
    headline: {
      size: "xs",
      weight: "regular",
    },
    subline: {
      size: "xxs",
      weight: "thin",
    },
    subline2: {
      size: "3xl",
      weight: "semibold",
    },
    link: {
      size: "xs",
      weight: "semibold",
    },
  },
};

const MobileTextStack = {
  L: {
    headline: {
      size: "l",
      weight: "regular",
    },
    subline: {
      size: "xs",
      weight: "thin",
    },
    subline2: {
      size: "6xl",
      weight: "semibold",
    },
    link: {
      size: "xs",
      weight: "semibold",
    },
  },
  M: {
    headline: {
      size: "m",
      weight: "regular",
    },
    subline: {
      size: "s",
      weight: "thin",
    },
    subline2: {
      size: "5xl",
      weight: "semibold",
    },
    link: {
      size: "s",
      weight: "semibold",
    },
  },
  S: {
    headline: {
      size: "s",
      weight: "regular",
    },
    subline: {
      size: "xs",
      weight: "thin",
    },
    subline2: {
      size: "4xl",
      weight: "semibold",
    },
    link: {
      size: "xs",
      weight: "semibold",
    },
  },
  XS: {
    headline: {
      size: "xs",
      weight: "semibold",
    },
    subline: {
      size: "xxs",
      weight: "thin",
    },
    subline2: {
      size: "3xl",
      weight: "semibold",
    },
    link: {
      size: "xxs",
      weight: "semibold",
    },
  },
};

// Map desktop sizes to mobile sizes
const desktopToMobileSizeMap = {
  XXXL: "L",
  XXL: "L",
  XL: "L",
  L: "M",
  M: "S",
  S: "XS",
  XS: "XS",
};

const SkinnyCoupon = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mobileWatcher = window.matchMedia("(max-width: 767px)");

    const handleMobileChange = (e) => setIsMobile(e.matches);

    // Set initial states
    setIsMobile(mobileWatcher.matches);

    // Add event listeners
    mobileWatcher.addEventListener("change", handleMobileChange);

    // Cleanup
    return () => {
      mobileWatcher.removeEventListener("change", handleMobileChange);
    };
  }, []);

  const desktopBackgroundImage = buildS7Image(
    containerBackgroundImageSlug,
    "$DWP_PHOTO$"
  );
  const mobileBackgroundImage = buildS7Image(
    containerBackgroundMobileImageSlug,
    "$DWP_PHOTO$"
  );
  const backgroundImage = isMobile ? mobileBackgroundImage : desktopBackgroundImage;

  const borderRadiusStyle = {
    borderTopLeftRadius: roundedCornerTopLeft ? 16 : 0,
    borderTopRightRadius: roundedCornerTopRight ? 16 : 0,
    borderBottomLeftRadius: roundedCornerBottomLeft ? 16 : 0,
    borderBottomRightRadius: roundedCornerBottomRight ? 16 : 0,
  };

  const gutters = {
    marginTop: isMobile
      ? `${mobileHorizontalGutter}px`
      : `${desktopHorizontalGutter}px`,
    marginBottom: isMobile
      ? `${mobileHorizontalGutter}px`
      : `${desktopHorizontalGutter}px`,
    marginLeft: isMobile
      ? `${mobileVerticalGutter}px`
      : `${desktopHorizontalGutter}px`,
    marginRight: isMobile
      ? `${mobileVerticalGutter}px`
      : `${desktopHorizontalGutter}px`,
  };

  const wrapperStyle = {
    background: backgroundImage
      ? `center / cover no-repeat url(${backgroundImage})`
      : containerBackgroundColor,
    maxWidth: layoutMode === "full" ? "100%" : undefined,
    overflow: "hidden",
    ...gutters,
  };

  const sectionStyle = {
    display: "flex",
    flexDirection: isMobile ? "column" : "row",
    alignItems: "center",
    justifyContent: "space-between",
    margin: "0 auto",
    maxWidth: "1600px",
    backgroundColor: backgroundImage ? undefined : innerBackgroundColor,
    ...borderRadiusStyle,
  };

  return (
    <div
      className="banner-wrapper"
      data-bildit-var-name="containerBackgroundImageSlug"
      data-bildit-var-type="String"
      style={{
        ...wrapperStyle,
        background: !isMobile && desktopBackgroundImage
          ? `center / cover no-repeat url(${desktopBackgroundImage})`
          : containerBackgroundColor,
      }}
    >
      <div
        data-bildit-var-name="containerBackgroundMobileImageSlug"
        data-bildit-var-type="String"
        style={{
          width: "100%",
          minHeight: "100%",
          background: isMobile && mobileBackgroundImage
            ? `center / cover no-repeat url(${mobileBackgroundImage})`
            : undefined,
        }}
      >
      <section
        className="banner-section"
        style={{
          ...sectionStyle,
          padding: isMobile ? "24px 16px" : "40px",
        }}
      >
        <div
          className="banner-content"
          style={{
            display: "flex",
            maxWidth: "1600px",
            margin: "0 auto",
            justifyContent: "space-between",
            alignItems: "center",
            flexDirection: isMobile ? "column" : "row",
            gap: isMobile ? "16px" : "24px",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: isMobile ? "column" : "row",
              alignItems: "center",
              justifyContent: "center",
              flex: 1,
              gap: isMobile ? "16px" : "24px",
              width: "100%",
            }}
          >
            {copyHeadlineText && (typeof copyHeadlineText === 'string' ? copyHeadlineText.length > 0 : true) ? (
              <h2
                data-bildit-var-name="copyHeadlineText"
                data-bildit-var-type="RichText"
                className={`belk-text-${
                  isMobile
                    ? MobileTextStack[desktopToMobileSizeMap[textstackSize]]
                        .headline.size
                    : DesktopTextStack[textstackSize].headline.size
                } font-${
                  isMobile
                    ? MobileTextStack[desktopToMobileSizeMap[textstackSize]]
                        .headline.weight
                    : DesktopTextStack[textstackSize].headline.weight
                }`}
                style={{
                  fontFamily: copyHeadlineFont,
                  textAlign: "center",
                  margin: 0,
                }}
              >
                {copyHeadlineText}
              </h2>
            ) : null}
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                gap: "4px",
                justifyContent: "center",
                width: isMobile ? "100%" : "auto",
              }}
            >
              {copySublineText && (typeof copySublineText === 'string' ? copySublineText.length > 0 : true) ? (
                <h3
                  data-bildit-var-name="copySublineText"
                  data-bildit-var-type="RichText"
                  className={`belk-text-${
                    isMobile
                      ? MobileTextStack[desktopToMobileSizeMap[textstackSize]]
                          .subline.size
                      : DesktopTextStack[textstackSize].subline.size
                  } font-${
                    isMobile
                      ? MobileTextStack[desktopToMobileSizeMap[textstackSize]]
                          .subline.weight
                      : DesktopTextStack[textstackSize].subline.weight
                  }`}
                  style={{
                    width: "25px",
                    fontFamily: copySublineFont,
                    textAlign: "center",
                    margin: 0,
                  }}
                >
                  {copySublineText}
                </h3>
              ) : null}
              {copySublineText2 && (typeof copySublineText2 === 'string' ? copySublineText2.length > 0 : true) ? (
                <h3
                  data-bildit-var-name="copySublineText2"
                  data-bildit-var-type="RichText"
                  className={`belk-text-${
                    isMobile
                      ? MobileTextStack[desktopToMobileSizeMap[textstackSize]]
                          .subline2.size
                      : DesktopTextStack[textstackSize].subline2.size
                  } font-${
                    isMobile
                      ? MobileTextStack[desktopToMobileSizeMap[textstackSize]]
                          .subline2.weight
                      : DesktopTextStack[textstackSize].subline2.weight
                  }`}
                  style={{
                    fontFamily: copySublineFont,
                    textAlign: "center",
                    margin: 0,
                  }}
                >
                  {copySublineText2}
                </h3>
              ) : null}
            </div>
          </div>

          {ctaTitle && ctaLocation && (typeof ctaTitle === 'string' ? ctaTitle.length > 0 : true) ? (
            <Link
              className={`cta-link belk-text-${
                isMobile
                  ? MobileTextStack[desktopToMobileSizeMap[textstackSize]].link
                      .size
                  : DesktopTextStack[textstackSize].link.size
              } font-${
                isMobile
                  ? MobileTextStack[desktopToMobileSizeMap[textstackSize]].link
                      .weight
                  : DesktopTextStack[textstackSize].link.weight
              }`}
              href={ctaLocation}
              title={ctaTitle}
              data-aali={ctaAdobeTag}
              style={{
                fontFamily: ctaFont,
                textDecoration: "none",
                cursor: "pointer",
                backgroundColor: ctaBackgroundColor,
                padding: "12px 12px",
                borderRadius: "4px",
                display: "inline-block",
                textAlign: "center",
                transition: "opacity 0.2s ease-in-out",
                whiteSpace: "nowrap",
                ":hover": {
                  opacity: 0.9,
                },
              }}
            >
              <span data-bildit-var-name="ctaTitle" data-bildit-var-type="RichText">{ctaTitle}</span>
            </Link>
          ) : null}
        </div>
      </section>
      </div>
    </div>
  );
};

export default SkinnyCoupon;
