"use client";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import type { HeroContent, HomepageItemDto } from "@/app/lib/content";

export default function HeroSection({
  content,
  slides,
}: {
  content: HeroContent;
  slides: HomepageItemDto[];
}) {
  const safeSlides =
    slides.length > 0
      ? slides
      : [
          {
            id: "fallback",
            section: "hero_slide",
            label: "Slide",
            text: "",
            href: "",
            imageUrl: "/vido_galary/futureleaders.jpg",
            altText: "Students learning",
            sortOrder: 0,
            published: true,
          },
        ];

  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((prev) => (prev + 1) % safeSlides.length);
    }, 4000);
    return () => clearInterval(timer);
  }, [safeSlides.length]);

  const prev = () =>
    setCurrent((c) => (c - 1 + safeSlides.length) % safeSlides.length);
  const next = () => setCurrent((c) => (c + 1) % safeSlides.length);
  const activeSlide = safeSlides[current] ?? safeSlides[0];

  return (
    <section className="site-section">
      <div className="site-container bg-white relative">
        <div className="relative overflow-hidden rounded-xl h-72 sm:h-96 md:h-120 lg:h-136">
          <Image
            src={activeSlide.imageUrl}
            alt={activeSlide.altText || activeSlide.label || "Hero image"}
            fill
            sizes="(min-width: 1600px) 1500px, (min-width: 1024px) 92vw, (min-width: 768px) 94vw, 96vw"
            className="object-cover rounded-xl transition-opacity duration-700"
            priority
          />

          <div className="absolute inset-x-0 bottom-0 z-20 bg-linear-to-t from-black/80 via-black/45 to-transparent">
            <div className="grid grid-cols-1 md:grid-cols-[1.15fr_0.85fr] gap-2 md:gap-5 items-end px-4 sm:px-6 md:px-8 py-4 md:py-7 pb-10 md:pb-12">
              <h1 className="text-xl sm:text-2xl md:text-4xl font-bold leading-tight text-white max-w-xl drop-shadow-sm">
                {content.heading}
              </h1>
              <div className="max-w-md flex flex-col gap-3 md:justify-self-end md:items-end">
                <p className="text-sm md:text-base leading-normal text-white/95 md:text-right">
                  {content.description}
                </p>
                <Link
                  href={content.ctaHref}
                  className="w-fit px-5 py-2 bg-[#1f3fb8] text-white text-xs md:text-sm font-semibold hover:bg-[#18339a] transition self-start md:self-end"
                >
                  {content.ctaText}
                </Link>
              </div>
            </div>
          </div>

          <button
            onClick={prev}
            className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white rounded-full w-9 h-9 flex items-center justify-center transition"
            aria-label="Previous"
          >
            &#8249;
          </button>
          <button
            onClick={next}
            className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white rounded-full w-9 h-9 flex items-center justify-center transition"
            aria-label="Next"
          >
            &#8250;
          </button>

          <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2">
            {safeSlides.map((slide, i) => (
              <button
                key={slide.id}
                onClick={() => setCurrent(i)}
                className={`w-2.5 h-2.5 rounded-full transition-all ${
                  i === current ? "bg-white scale-125" : "bg-white/50"
                }`}
                aria-label={`Go to slide ${i + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
