import React from "react";
import { PrimaryHeroProps } from "./types";

import { Checklist } from "@shared/components/checklist";
import { NextImage } from "@shared/components/next-image";
import { Text } from "@shared/components/text";
import { Button } from "@shared/contentful/blocks/button";
import { cx } from "@shared/utils";

export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
  const {
    title,
    showAsHeading,
    subTitle,
    primaryCta1,
    primaryCta2,
    carouselImages,
    bottomLink,
    price,
    priceCallout,
    priceSuffix,
    checklist,
    renderCheckPlans,
    badgeImage,
    pricingDescription,
    pricingDescriptionDisclaimer,
    secondaryCta,
    secondaryCtaPrefix,
    onModalButtonClick,
    hideOnMobileCta1,
    hideOnMobileCta2,
    textColor = "light",
    logoLockup,
    heroVideo,
    heroVideoMobile,
  } = props;

  const isButtonType = (cta: any) => {
    const type = cta?.showButtonAs ?? "solid";
    return (
      type === "solid" || type === "button-with-icon" || type === "unstyled"
    );
  };

  const showCtasSideBySide =
    primaryCta1 &&
    primaryCta2 &&
    isButtonType(primaryCta1) &&
    isButtonType(primaryCta2);

  const desktopVideoUrl = heroVideo?.url?.trim();
  const mobileVideoUrl = heroVideoMobile?.url?.trim();
  const hasDesktopVideo = !!desktopVideoUrl;
  const hasMobileVideo = !!mobileVideoUrl;
  const normalizeImageUrl = (url?: string) =>
    url?.startsWith("//") ? `https:${url}` : url;
  const badgeImageUrl = normalizeImageUrl(badgeImage);
  const heroImageUrl = normalizeImageUrl(carouselImages?.[0]);
  const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
  const baseTextColorClass = textColor === "dark" ? "text-text" : "text-white";
  const textColorClass =
    hasDesktopVideo && textColor === "dark"
      ? `${baseTextColorClass} xl:text-white`
      : baseTextColorClass;
  const Badge = ({ className }: { className: string }) =>
    badgeImageUrl ? (
      <NextImage
        src={badgeImageUrl}
        alt="Badge"
        className={className}
        width={208}
        height={208}
        quality={90}
        loading="eager"
      />
    ) : null;
  return (
    <div className="component-container relative overflow-hidden p-4 sm:px-6 sm:py-12 xl:flex xl:min-h-[724px] xl:items-center xl:px-10">
      {hasDesktopVideo ? (
        <video
          autoPlay={true}
          muted={true}
          loop={true}
          playsInline={true}
          preload="auto"
          aria-label={heroVideo?.title || title || "Hero background video"}
          className="absolute inset-0 z-0 hidden h-full w-full object-fill xl:block"
          data-testid="hero-background-video-desktop"
        >
          <source src={desktopVideoUrl} type="video/mp4" />
        </video>
      ) : null}
      <div
        className={cx(
          "primary-hero-container relative z-10 mx-auto flex w-full max-w-[626px] flex-col sm:items-center sm:text-center xl:h-full xl:max-w-120 xl:flex-row xl:items-center xl:justify-between xl:gap-4 xl:text-left"
        )}
      >
        {/* Left column: navy background, headline, body, address, button, link */}
        <div
          className={cx(
            `relative flex flex-col ${textColorClass} w-full xl:w-[485px]`
          )}
        >
          <div className="flex flex-col gap-5 lg:gap-6">
            {title && (
              <Text
                as={showAsHeading ? "h1" : "h2"}
                className="heading2 lg:heading1"
              >
                {title}
              </Text>
            )}
            {subTitle && (
              <Text as="p" className="subheading3">
                {subTitle}
              </Text>
            )}

            {/* price callout */}
            {price ? (
              <div className="flex sm:justify-center sm:text-left lg:justify-start">
                <div className="mr-2 mt-0.5">
                  {priceCallout
                    ? priceCallout.split("|").map((line, index) => (
                        <Text key={index} as="p" className="body2">
                          {line}
                        </Text>
                      ))
                    : null}
                </div>
                <div className="flex">
                  <Text as="p" className="subheading1 mt-0.5">
                    $
                  </Text>
                  <Text as="p" className="subheading5">
                    {price}
                  </Text>
                  {priceSuffix ? (
                    <Text as="p" className="subheading1 mt-0.5">
                      {priceSuffix}
                    </Text>
                  ) : null}
                </div>
              </div>
            ) : null}

            {pricingDescription ? (
              <Text
                data-cy="hero-pricing-description"
                className={cx(
                  "subheading1",
                  "text-left sm:text-center xl:text-left"
                )}
              >
                {pricingDescription}
              </Text>
            ) : null}

            {pricingDescriptionDisclaimer ? (
              <Text
                data-cy="hero-pricing-disclaimer"
                as="p"
                className={cx("body3", "text-left sm:text-center xl:text-left")}
              >
                {pricingDescriptionDisclaimer}
              </Text>
            ) : null}

            {/* checklist */}
            {checklist && (
              <Checklist
                listItemClassName={`body2 text-left ${textColorClass}`}
                items={checklist.map(item =>
                  item.iconUrl
                    ? { title: item.title, iconUrl: item.iconUrl }
                    : item.title
                )}
              />
            )}

            {logoLockup ? (
              <div className="text-left sm:text-center xl:mb-0 xl:text-left">
                <NextImage
                  src={logoLockup}
                  alt={"Logo Lockup"}
                  className="inline-block"
                  width={201}
                  height={24}
                  quality={90}
                  loading="eager"
                />
              </div>
            ) : null}

            {/* CTA section */}
            <div className="flex flex-col gap-3">
              {/* desktop CTA */}
              {showCtasSideBySide ? (
                <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4 xl:justify-start">
                  <div className={cx(hideOnMobileCta1 && "hidden md:block")}>
                    <Button
                      {...primaryCta1}
                      renderCheckPlans={renderCheckPlans}
                      onModalButtonClick={onModalButtonClick}
                      fullWidth={true}
                      size={{ base: "large" }}
                      buttonClassName="md:w-auto text-center"
                    />
                  </div>
                  <div className={cx(hideOnMobileCta2 && "hidden md:block")}>
                    <Button
                      {...primaryCta2}
                      renderCheckPlans={renderCheckPlans}
                      onModalButtonClick={onModalButtonClick}
                      fullWidth={true}
                      size={{ base: "large" }}
                      buttonClassName="md:w-auto text-center"
                    />
                  </div>
                </div>
              ) : (
                <>
                  {primaryCta1 && (
                    <div
                      className={cx("md:block", hideOnMobileCta1 && "hidden")}
                    >
                      <Button
                        {...primaryCta1}
                        renderCheckPlans={renderCheckPlans}
                        onModalButtonClick={onModalButtonClick}
                        fullWidth={true}
                        buttonClassName="lg:w-auto text-center"
                      />
                    </div>
                  )}
                  {primaryCta2 && (
                    <div
                      className={cx("md:block", hideOnMobileCta2 && "hidden")}
                    >
                      <Button
                        {...primaryCta2}
                        renderCheckPlans={renderCheckPlans}
                        onModalButtonClick={onModalButtonClick}
                        fullWidth={true}
                        buttonClassName="lg:w-auto text-center"
                      />
                    </div>
                  )}
                </>
              )}
              {secondaryCtaPrefix || secondaryCta ? (
                <div className="hidden lg:flex">
                  {secondaryCtaPrefix && (
                    <Text as="span" className="body2 mr-1">
                      {secondaryCtaPrefix}
                    </Text>
                  )}
                  {secondaryCta && (
                    <Button
                      linkClassName={`body2 ${textColorClass}`}
                      onModalButtonClick={onModalButtonClick}
                      {...secondaryCta}
                    />
                  )}
                </div>
              ) : null}

              {/* desktop bottom link */}
              {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
                <div className="hidden lg:block">
                  <Button
                    {...bottomLink}
                    linkClassName={`text-footnote ${textColorClass}`}
                    onModalButtonClick={onModalButtonClick}
                  />
                </div>
              )}
            </div>
          </div>
        </div>

        {/* mobile hero image and bottom link */}
        <div className="w-full xl:hidden">
          <div className={"relative my-8"}>
            {hasMobileVideo ? (
              <div className="relative">
                <video
                  autoPlay={true}
                  muted={true}
                  loop={true}
                  playsInline={true}
                  preload="auto"
                  aria-label={heroVideoMobile?.title || title || "Hero video"}
                  className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
                  data-testid="hero-video-mobile"
                >
                  <source src={mobileVideoUrl} type="video/mp4" />
                </video>
                <Badge className="absolute left-5 top-5 z-10 aspect-square w-26 object-cover object-center" />
              </div>
            ) : (
              <>
                {badgeImage ? (
                  <NextImage
                    src={badgeImageUrl || ""}
                    alt={"Badge"}
                    className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
                    width={104}
                    height={104}
                    quality={90}
                    loading="eager"
                  />
                ) : null}
                {heroImageUrl ? (
                  <NextImage
                    src={heroImageUrl}
                    alt={"Hero"}
                    className="h-[205px] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
                    width={1024}
                    height={600}
                    sizes="100vw"
                    quality={90}
                    loading="eager"
                  />
                ) : null}
              </>
            )}
          </div>

          {secondaryCtaPrefix || secondaryCta ? (
            <div
              className={`flex flex-wrap items-center ${textColorClass} lg:hidden`}
            >
              {secondaryCtaPrefix && (
                <Text as="span" className="body2 mr-1">
                  {secondaryCtaPrefix}
                </Text>
              )}
              {secondaryCta && (
                <Button
                  {...secondaryCta}
                  onModalButtonClick={onModalButtonClick}
                  linkClassName={`${textColorClass}`}
                />
              )}
            </div>
          ) : null}

          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
            <div className="flex lg:hidden">
              <Button
                {...bottomLink}
                onModalButtonClick={onModalButtonClick}
                linkClassName={`body3 ${textColorClass}`}
              />
            </div>
          )}
        </div>

        {/* Right column: bright blue background, diagonal top edge, hero image */}
        <div
          className={cx(
            "relative hidden xl:block",
            hasDesktopVideo && "h-[600px] w-[600px]"
          )}
        >
          <Badge className="absolute -left-26 top-18 z-10 aspect-square w-52 object-cover object-center" />
          {!hasDesktopVideo && heroImageUrl ? (
            <NextImage
              src={heroImageUrl}
              alt={"Hero"}
              className="aspect-square rounded-[40px] object-cover object-center"
              width={600}
              height={600}
              quality={90}
              loading="eager"
            />
          ) : null}
        </div>
      </div>
    </div>
  );
};

export default PrimaryHero;