"use client";

import { useCallback, useEffect, useId, useState, useSyncExternalStore } from "react";
import { QuoteMark } from "@/components/ui/Icons";

type Item = { quote: string; author: string; role: string };

const INTERVAL_MS = 8000;
const RM_QUERY = "(prefers-reduced-motion: reduce)";
function subscribeReducedMotion(cb: () => void) {
  const mq = window.matchMedia(RM_QUERY);
  mq.addEventListener("change", cb);
  return () => mq.removeEventListener("change", cb);
}
function getReducedMotion() {
  return window.matchMedia(RM_QUERY).matches;
}

export function TestimonialSlider({ items }: { items: Item[] }) {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const reduced = useSyncExternalStore(subscribeReducedMotion, getReducedMotion, () => false);
  const regionId = useId();

  const go = useCallback(
    (n: number) => setIndex((i) => (i + n + items.length) % items.length),
    [items.length],
  );

  useEffect(() => {
    if (items.length < 2 || paused || reduced) return;
    const t = setInterval(() => go(1), INTERVAL_MS);
    return () => clearInterval(t);
  }, [go, items.length, paused, reduced]);

  const current = items[index];
  const multiple = items.length > 1;

  return (
    <section
      aria-roledescription="carrousel"
      aria-label="Témoignages de clients"
      className="bg-pale-200 relative rounded-[var(--radius-xl)] px-6 py-8 sm:px-10 md:px-14 md:py-10"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocusCapture={() => setPaused(true)}
      onBlurCapture={(e) => {
        if (!e.currentTarget.contains(e.relatedTarget as Node)) setPaused(false);
      }}
      onKeyDown={(e) => {
        if (!multiple) return;
        if (e.key === "ArrowRight") go(1);
        if (e.key === "ArrowLeft") go(-1);
      }}
    >
      <div className="flex flex-col gap-6 md:flex-row md:items-start md:gap-8">
        <QuoteMark className="text-gold-400 h-9 w-9 shrink-0 md:h-11 md:w-11" />
        <div id={regionId} aria-live="polite" aria-atomic="true" className="flex-1">
          <blockquote>
            <p className="text-navy-900 font-serif text-xl leading-relaxed italic md:text-[1.45rem]">
              {current.quote}
            </p>
            <footer className="text-ink-700 mt-5 text-sm">
              <span aria-hidden="true">— </span>
              <cite className="text-ink-900 font-semibold not-italic">{current.author}</cite>
              {current.role ? <span>, {current.role}</span> : null}
            </footer>
          </blockquote>
        </div>

        {multiple ? (
          <div
            className="flex items-center gap-3 self-end md:self-center"
            role="group"
            aria-label="Pagination des témoignages"
          >
            <button
              type="button"
              onClick={() => setPaused((p) => !p)}
              aria-pressed={paused}
              className="text-ink-700 rounded-md px-2 py-1 text-xs hover:bg-white/50"
            >
              {paused ? "Reprendre" : "Pause"}
            </button>
            <ul className="flex items-center gap-2.5">
              {items.map((_, i) => (
                <li key={i}>
                  <button
                    type="button"
                    aria-label={`Témoignage ${i + 1} sur ${items.length}`}
                    aria-current={i === index ? "true" : undefined}
                    aria-controls={regionId}
                    onClick={() => setIndex(i)}
                    className={`block h-2.5 w-2.5 rounded-full transition-colors ${
                      i === index ? "bg-navy-900" : "bg-pale-400 hover:bg-slate-500"
                    }`}
                  />
                </li>
              ))}
            </ul>
          </div>
        ) : null}
      </div>
    </section>
  );
}