"use client";

import { useCallback, useEffect, useState } from "react";
import Image from "next/image";
import Button from "@/components/Button";
import { IconFleche } from "@/components/icons";
import { urlAsset } from "@/lib/utils/assets";
import type { Slide } from "@/types/slide";
import styles from "./Hero.module.css";

export default function HeroCarousel({ slides }: { slides: Slide[] }) {
  const [actif, setActif] = useState(0);
  const [enPause, setEnPause] = useState(false);

  const allerA = useCallback(
    (index: number) => {
      setActif((index + slides.length) % slides.length);
    },
    [slides.length],
  );

  useEffect(() => {
    if (enPause || slides.length <= 1) return;

    const interval = setInterval(() => {
      setActif((prev) => (prev + 1) % slides.length);
    }, 6000);

    return () => clearInterval(interval);
  }, [enPause, slides.length]);

  const slide = slides[actif];

  return (
    <section
      className={styles.hero}
      onMouseEnter={() => setEnPause(true)}
      onMouseLeave={() => setEnPause(false)}
    >
      <div className={styles.inner}>
        <div className={styles.slideContainer} key={slide.id}>
          <div className={styles.colonneTexte}>
            <p className={styles.eyebrow}>Loi n° 2017-39, Bénin</p>
            <h1 className={styles.titre} dangerouslySetInnerHTML={{ __html: slide.titre }} />
            {slide.sousTitre && <p className={styles.texte}>{slide.sousTitre}</p>}
            <div className={styles.actions}>
              <Button href={slide.ctaPrimaireLien} size="lg" iconeDroite={<IconFleche />}>
                {slide.ctaPrimaireLabel}
              </Button>
              <Button href={slide.ctaSecondaireLien} variant="secondaire" size="lg">
                {slide.ctaSecondaireLabel}
              </Button>
            </div>
          </div>

          <div className={styles.colonneImage}>
            <div className={styles.cadre}>
              <Image
                src={urlAsset(slide.imageUrl)}
                alt={slide.titre}
                fill
                sizes="(min-width: 1024px) 440px, (min-width: 640px) 340px, 280px"
                className={styles.image}
                priority
              />
            </div>
            <span className={styles.badge}>100% biodégradable</span>
          </div>
        </div>

        {slides.length > 1 && (
          <div className={styles.controls}>
            <div className={styles.navArrows}>
              <button type="button" className={styles.arrowBtn} onClick={() => allerA(actif - 1)} aria-label="Slide précédente">
                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
              <button type="button" className={styles.arrowBtn} onClick={() => allerA(actif + 1)} aria-label="Slide suivante">
                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>

            <div className={styles.dots}>
              {slides.map((s, index) => (
                <button
                  key={s.id}
                  type="button"
                  className={`${styles.dot} ${index === actif ? styles.dotActif : ""}`}
                  onClick={() => allerA(index)}
                  aria-label={`Voir la slide ${index + 1}`}
                />
              ))}
            </div>

            <span className={styles.compteur}>
              {actif + 1} / {slides.length}
            </span>
          </div>
        )}
      </div>
    </section>
  );
}