'use client';

import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import type { HeroCarouselPayload } from '@/types/api';
import { SmartImage } from '@/components/ui';

export function HeroCarousel({ payload, locale }: { payload: HeroCarouselPayload; locale: string }) {
  const t = useTranslations('home');
  const [idx, setIdx] = useState(0);
  const slides = payload.slides ?? [];
  const advance = useCallback(() => setIdx((i) => (i + 1) % slides.length), [slides.length]);

  useEffect(() => {
    if (slides.length <= 1) return;
    const id = setInterval(advance, 6000);
    return () => clearInterval(id);
  }, [advance, slides.length]);

  if (slides.length === 0) return null;
  const slide = slides[idx];

  return (
    <section aria-label={t('hero_label')} className="relative h-[55vh] min-h-[380px] md:h-[65vh] md:min-h-[480px] w-full overflow-hidden bg-neutral-900">
      <SmartImage
        src={slide.image_url}
        alt=""
        aria-hidden
        fallbackCategory="birthday"
        fallbackSeed={`hero-${idx}`}
        loading="eager"
        showSkeleton={false}
        className="absolute inset-0 h-full w-full"
        imgClassName="absolute inset-0 h-full w-full object-cover opacity-75"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/15 to-transparent" />

      <div className="relative mx-auto flex h-full max-w-7xl flex-col justify-end px-4 pb-12 text-white">
        <h1 className="font-heading text-3xl md:text-5xl font-bold max-w-2xl leading-tight text-start">
          {slide.headline}
        </h1>
        {slide.sub ? (
          <p className="mt-3 max-w-xl text-sm md:text-base text-white/85 text-start">{slide.sub}</p>
        ) : null}
        {slide.cta_url && slide.cta_label ? (
          <Link
            href={slide.cta_url.startsWith('http') ? slide.cta_url : `/${locale}${slide.cta_url}`}
            className="mt-6 inline-flex w-fit items-center justify-center rounded-md bg-primary-600 hover:bg-primary-700 px-5 py-3 text-sm font-medium text-white shadow-sm transition"
          >
            {slide.cta_label}
          </Link>
        ) : null}
      </div>

      {slides.length > 1 ? (
        <div className="absolute bottom-5 end-4 flex gap-1.5">
          {slides.map((_, i) => (
            <button
              key={i}
              type="button"
              aria-label={`Slide ${i + 1}`}
              onClick={() => setIdx(i)}
              className="p-2 -m-1.5 flex items-center justify-center"
            >
              <span
                className={`block h-1.5 rounded-full transition-all duration-300 ${
                  i === idx ? 'w-5 bg-white' : 'w-1.5 bg-white/40 hover:bg-white/60'
                }`}
              />
            </button>
          ))}
        </div>
      ) : null}
    </section>
  );
}