"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";

import Autoplay from "embla-carousel-autoplay";

import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  type CarouselApi,
} from "@/components/ui/carousel";

import { cn } from "@/lib/utils";
import type { HeroSection } from "@/types/landing-pages.type";

interface ProgramVaksinasiHeroSectionProps {
  hero: HeroSection;
}

const ProgramVaksinasiHeroSection = ({ hero }: ProgramVaksinasiHeroSectionProps) => {
  const [api, setApi] = React.useState<CarouselApi>();
  const [current, setCurrent] = React.useState(0);
  const [count, setCount] = React.useState(0);

  const plugin = React.useRef(
    Autoplay({ delay: 2500, stopOnInteraction: false }),
  );

  React.useEffect(() => {
    if (!api) {
      return;
    }
    setCount(api.scrollSnapList().length);
    setCurrent(api.selectedScrollSnap() + 1);
    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1);
    });
  }, [api]);

  return (
    <section className="bg-background-custom p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col gap-12 items-center justify-center text-center">
          <div className="flex flex-col gap-6">
            <h1 className="font-semibold text-text-sub text-6xl">
              {hero.title || "Vaksinisasi Adera"}
            </h1>
            <h3 className="text-2xl text-[#383636CC]">
              {hero.subtitle || "Layanan vaksin aman, lengkap, dan terpercaya untuk anak serta dewasa di Klinik Adera."}
            </h3>
            <div className="flex w-full gap-4">
              <Link
                href="https://calq.klinikadera.co.id"
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-full flex-1 font-semibold py-6 px-6 text-lg inline-flex items-center justify-center bg-[#003dd8] text-white hover:bg-[#003dd8]/90 transition-colors"
              >
                {hero.primaryCtaLabel || "Reservasi Sekarang"}
              </Link>
              <Link
                href="#vaksinasi-list"
                className="rounded-full flex-1 font-semibold py-6 px-6 text-lg inline-flex items-center justify-center bg-transparent border-2 border-[#003dd8] text-[#003dd8] hover:bg-[#003dd8]/5 transition-colors"
              >
                {hero.secondaryCtaLabel || "Lihat Layanan"}
              </Link>
            </div>
          </div>
          <Carousel
            plugins={[plugin.current]}
            className="w-full"
            onMouseEnter={plugin.current.stop}
            onMouseLeave={plugin.current.reset}
            setApi={setApi}
          >
            <CarouselContent>
              {Array.from({ length: 4 }).map((_, index) => (
                <CarouselItem key={`slide-${index}`}>
                  <div className="aspect-video relative w-7xl h-162 rounded-xl overflow-hidden">
                    <Image
                      src={hero.imageUrl || "/assets/program/hero-vaksinasi.png"}
                      alt={hero.title || "Vaksinasi Hero"}
                      fill
                      className="object-cover"
                    />

                    <div className="absolute inset-0 bg-linear-to-b from-[#AAE8FF20] to-[#FFFFFF] z-20 opacity-50" />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="left-6" />
            <CarouselNext className="right-6" />
            <div className="absolute bottom-6 left-0 right-0">
              <div className="flex gap-2 justify-center">
                {Array.from({ length: count }).map((_, idx) => (
                  <div
                    key={`dot-${idx}`}
                    className={cn(
                      "size-3 rounded-full",
                      current === idx + 1 ? "bg-[#5F91FF]" : "bg-white",
                    )}
                  />
                ))}
              </div>
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiHeroSection;