"use client";

import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { ArrowLeft } from "lucide-react";
import Image from "next/image";
import { ReactNode } from "react";

interface IllustrationImageProps {
  type: "illustration";
  src: string;
  alt: string;
}

interface PhotosImageProps {
  type: "photos";
  images: [
    {
      src: string;
      alt: string;
    },
    {
      src: string;
      alt: string;
    }
  ];
}

interface CustomImageProps {
  type: "custom";
  component: ReactNode;
}

type HeroImageProps =
  | IllustrationImageProps
  | PhotosImageProps
  | CustomImageProps;

interface HeroButton {
  text: string;
  href: string;
  variant?: "primary" | "outline";
  icon?: boolean;
}

export interface HeroProps {

  title: string;

  description: string;

  image?: HeroImageProps;

  buttons?: HeroButton[];

  showBackgroundDecor?: boolean;

  showOnlyText?: boolean;
}

export default function Hero({
  title,
  description,
  image,
  buttons = [],
  showBackgroundDecor = true,
  showOnlyText = false,
}: HeroProps) {
  return (
    <section
      className={`relative overflow-hidden bg-linear-to-br from-[#1488cc] to-[#2b32b2] ${showOnlyText
          ? "min-h-[280px] sm:min-h-[320px] md:min-h-[360px]"
          : "min-h-[calc(100vh-4rem)] sm:min-h-[calc(100vh-5rem)] md:min-h-[calc(100vh-6rem)]"
        }`}
      style={{
        backgroundImage:
          "linear-gradient(112.12deg, #1488CC 0%, #2B32B2 116.4%)",
      }}
    >

      {showBackgroundDecor && (
        <>

          <div className="absolute -start-[120px] sm:-start-[320px] md:-start-[380px] lg:-start-[455px] -top-[380px] sm:-top-[480px] md:-top-[580px] lg:-top-[680px] w-[400px] h-[500px] sm:w-[700px] sm:h-[700px] md:w-[750px] md:h-[850px] lg:w-[810px] lg:h-[914px] pointer-events-none opacity-40 z-0">
            <Image
              src="/images/hero/ellipse.svg"
              alt=""
              fill
              className="object-contain"
              priority
            />
          </div>

          <div className="absolute left-1/2 -top-10 -translate-x-1/2 w-full max-w-[900px] lg:max-w-[1200px] h-[400px] sm:h-[500px] md:h-[590px] pointer-events-none opacity-20 z-0">
            <div className="relative w-full h-full rotate-180 scale-y-[-1]">
              <Image
                src="/images/hero/bg-line.svg"
                alt=""
                fill
                className="object-contain"
              />
            </div>
          </div>
        </>
      )}

      <div
        className={`relative container mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] z-10 ${showOnlyText
            ? "py-16 sm:py-20 md:py-24"
            : "pt-16 sm:pt-20 md:pt-24 lg:pt-32 pb-12 sm:pb-16 md:pb-20"
          }`}
      >
        <div
          className={`flex ${showOnlyText
              ? "flex-col items-center justify-center"
              : "flex-col lg:flex-row items-center justify-between"
            } gap-8 sm:gap-12 md:gap-16 lg:gap-16 xl:gap-20`}
        >

          <div
            className={`flex flex-col gap-6 sm:gap-7 md:gap-8 items-center text-center w-full ${showOnlyText
                ? "flex-none max-w-[736px]"
                : "flex-1 lg:items-start lg:text-start"
              }`}
          >

            <div
              className={`flex flex-col gap-4 sm:gap-5 md:gap-6 items-center w-full ${showOnlyText ? "" : "lg:items-start max-w-[700px]"
                }`}
            >
              <h1 className="font-bold text-white text-3xl sm:text-4xl md:text-5xl lg:text-[56px] leading-[1.3] sm:leading-[1.35] md:leading-[1.4]">
                {title}
              </h1>
              <p
                className={`text-white leading-normal sm:leading-[1.55] md:leading-[1.6] ${showOnlyText
                    ? "font-medium text-lg sm:text-xl md:text-2xl"
                    : "font-normal text-white/87 text-base sm:text-lg md:text-xl"
                  }`}
              >
                {description}
              </p>
            </div>

            {buttons.length > 0 && (
              <div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto">
                {buttons.map((button, index) => {
                  const isPrimary =
                    button.variant === "primary" ||
                    button.variant === undefined;

                  return (
                    <Button
                      key={index}
                      asChild
                        size="xl"
                        variant={isPrimary ? "default" : "outline"}
                        className={
                          isPrimary
                            ? "w-full sm:w-auto bg-white hover:bg-white/90 text-primary-500 font-semibold rounded-xl h-11 sm:h-12 px-5 sm:px-6 gap-2 transition-all"
                            : "w-full sm:w-auto bg-transparent border-white text-white hover:bg-white/10 hover:text-white hover:border-white font-semibold rounded-xl h-11 sm:h-12 px-5 sm:px-6 transition-all"
                        }
                      >
                      <Link href={button.href} className="w-full sm:w-auto">
                        <span className="text-sm sm:text-base">
                          {button.text}
                        </span>
                        {button.icon && isPrimary && (
                          <ArrowLeft className="h-5 w-5 ltr:rotate-180" />
                        )}
                      </Link>
                    </Button>
                  );
                })}
              </div>
            )}
          </div>

          {!showOnlyText && image && (
            <div className="relative w-full max-w-[280px] sm:max-w-[350px] md:max-w-[420px] lg:max-w-[480px] xl:max-w-[510px] shrink-0">
              {image.type === "illustration" && (
                <div className="relative w-full h-[240px] sm:h-[280px] md:h-[320px] lg:h-[350px]">
                  <Image
                    src={image.src}
                    alt={image.alt}
                    fill
                    className="object-contain"
                    priority
                  />
                </div>
              )}

              {image.type === "photos" && (
                <div className="relative w-full h-[280px] sm:h-[320px] md:h-[360px] lg:h-[384px]">

                  <div className="absolute end-0 top-[26%] w-[4px] h-[54.5%] bg-[#1c75bc] border-[3px] border-solid border-white rounded-te-[18px] rounded-be-[18px] z-10" />

                  <div className="relative h-full w-[calc(100%-50px)] sm:w-[calc(100%-60px)] md:w-[calc(100%-70px)] lg:w-[402px] border border-[#6ebcfb] rounded-[10px] overflow-hidden ms-auto">
                    <Image
                      src={image.images[0].src}
                      alt={image.images[0].alt}
                      fill
                      className="object-cover"
                      priority
                    />
                  </div>

                  {image.images[1] && (
                    <div className="absolute start-0 -bottom-9 w-[140px] h-[165px] sm:w-[160px] sm:h-[190px] md:w-[170px] md:h-[200px] lg:w-[185px] lg:h-[222px] border-8 border-solid border-white rounded-[10px] overflow-hidden shadow-lg z-20">
                      <div className="relative w-full h-full">
                        <Image
                          src={image.images[1].src}
                          alt={image.images[1].alt}
                          fill
                          className="object-cover"
                        />
                      </div>
                    </div>
                  )}
                </div>
              )}

              {image.type === "custom" && image.component}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}