// Rôle : affiche la section de prise en main de la home avec étapes, slider et accès rapides.
import { useEffect, useMemo, useState } from "react";

const SLIDE_INTERVAL_MS = 4500;

function prefersReducedMotion() {
  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
}

export function HomeOnboardingSection({ content, className = "", onCreateToolbox }) {
  const slides = useMemo(() => content?.slides || [], [content]);
  const [activeSlide, setActiveSlide] = useState(0);
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    if (slides.length <= 1 || isPaused || prefersReducedMotion()) return undefined;
    const intervalId = window.setInterval(() => {
      setActiveSlide((current) => (current + 1) % slides.length);
    }, SLIDE_INTERVAL_MS);
    return () => window.clearInterval(intervalId);
  }, [isPaused, slides.length]);

  if (!content) return null;

  const currentSlide = slides[activeSlide] || slides[0];

  return (
    <section className={["home-onboarding nds-panel", className].filter(Boolean).join(" ")} aria-labelledby="home-onboarding-title">
      <div className="home-section-heading home-onboarding-heading">
        <p className="eyebrow">{content.eyebrow}</p>
        <h2 id="home-onboarding-title">{content.title}</h2>
        <p>{content.description}</p>
      </div>
      <div className="home-onboarding-layout">
        <div className="home-onboarding-steps">
          <h3>{content.stepsTitle}</h3>
          <ol>
            {content.steps.map((step, index) => (
              <li key={step.title}>
                <span>{index + 1}</span>
                <div>
                  <strong>{step.title}</strong>
                  <p>{step.text}</p>
                </div>
              </li>
            ))}
          </ol>
          {onCreateToolbox && content.primaryAction && (
            <div className="home-onboarding-steps-action">
              <button className="home-onboarding-create-button nds-button" data-size="md" data-variant="primary" type="button" onClick={onCreateToolbox}>
                {content.primaryAction}
              </button>
            </div>
          )}
        </div>
        <div className="home-onboarding-preview">
          <h3>{content.sliderTitle}</h3>
          <div
            className="home-onboarding-slider"
            onMouseEnter={() => setIsPaused(true)}
            onMouseLeave={() => setIsPaused(false)}
            onFocus={() => setIsPaused(true)}
            onBlur={() => setIsPaused(false)}
          >
            {currentSlide && (
              <figure>
                <img src={currentSlide.src} alt={currentSlide.alt} />
                <figcaption>
                  <strong>{currentSlide.title}</strong>
                  <span>{currentSlide.text}</span>
                </figcaption>
              </figure>
            )}
            {slides.length > 1 && (
              <div className="home-onboarding-dots" aria-label={content.sliderLabel}>
                {slides.map((slide, index) => (
                  <button
                    className={index === activeSlide ? "active" : ""}
                    key={slide.src}
                    type="button"
                    onClick={() => setActiveSlide(index)}
                    aria-label={`${content.slideButtonLabel} ${index + 1}`}
                    aria-pressed={index === activeSlide}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
      <div className="home-onboarding-cards">
        {content.cards.map((card) => (
          <a className="home-onboarding-card" href={card.href} key={card.href}>
            <span className="home-onboarding-card-visual">
              <img src={card.image} alt="" aria-hidden="true" />
            </span>
            <span className="home-onboarding-card-body">
              <span className="home-onboarding-card-title">
                <span className={`module-icon-svg module-icon-${card.icon}`} aria-hidden="true" />
                <strong>{card.title}</strong>
              </span>
              <span className="home-onboarding-card-text">{card.text}</span>
              <em>{card.action}</em>
            </span>
          </a>
        ))}
      </div>
    </section>
  );
}