"use client";

import Image from "next/image";
import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import { toFa } from "@/lib/format";

type Slide = {
  image: string;
  eyebrow: string;
  title: string;
  subtitle: string;
};

const slides: Slide[] = [
  {
    image:
      "https://images.unsplash.com/photo-1583364428520-fa6c5013c0c3?fm=jpg&q=80&w=2400&auto=format&fit=crop",
    eyebrow: "بیش از ۲۳ سال تجربه",
    title: "کیفیتی که به آن اعتماد دارید",
    subtitle: "بیش از ۲۳۰ مشتری در سراسر کشور، انتخاب اول خود را کرده‌اند",
  },
  {
    image:
      "https://images.unsplash.com/photo-1589348792383-8ebcbec4ef88?fm=jpg&q=80&w=2400&auto=format&fit=crop",
    eyebrow: "دام سالم، تولید پایدار",
    title: "همراه شما در تمام دوره‌های پرورش",
    subtitle:
      "از دوره پروار تا شیردهی؛ مکمل‌هایی متناسب با نیاز واقعی گله شما",
  },
  {
    image:
      "https://images.unsplash.com/photo-1723357018190-c0163698165b?fm=jpg&q=80&w=2400&auto=format&fit=crop",
    eyebrow: "طیور پرقدرت",
    title: "افزایش بازده با تغذیه اصولی",
    subtitle:
      "بهبود کیفیت تخم و گوشت، تقویت ایمنی و رشد یکنواخت گله طیور",
  },
];

const AUTOPLAY_MS = 6000;

export default function HeroSlider() {
  const [index, setIndex] = useState(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const goTo = useCallback((i: number) => {
    setIndex((i + slides.length) % slides.length);
  }, []);

  const next = useCallback(() => goTo(index + 1), [goTo, index]);
  const prev = useCallback(() => goTo(index - 1), [goTo, index]);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setIndex((i) => (i + 1) % slides.length);
    }, AUTOPLAY_MS);
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, [index]);

  function pause() {
    if (timerRef.current) clearInterval(timerRef.current);
  }

  function resume() {
    if (timerRef.current) clearInterval(timerRef.current);
    timerRef.current = setInterval(() => {
      setIndex((i) => (i + 1) % slides.length);
    }, AUTOPLAY_MS);
  }

  return (
    <section
      role="region"
      aria-roledescription="carousel"
      aria-label="اسلایدر معرفی آراد آریسمان"
      onMouseEnter={pause}
      onMouseLeave={resume}
      className="relative -mt-[125px] h-svh min-h-[520px] w-full overflow-hidden bg-secondary"
    >
      {slides.map((slide, i) => (
        <div
          key={slide.title}
          aria-hidden={i !== index}
          className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
            i === index ? "opacity-100 z-10" : "opacity-0 z-0"
          }`}
        >
          <Image
            src={slide.image}
            alt={slide.title}
            fill
            priority={i === 0}
            className="object-cover"
            sizes="100vw"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/10" />

          <div className="relative z-10 flex h-full items-center pt-[125px]">
            <div className="mx-auto w-full max-w-7xl px-5 sm:px-8">
              <div className="max-w-xl text-center sm:text-start mx-auto sm:mx-0 sm:ps-12">
                <span
                  className={`inline-block rounded-full bg-white/10 backdrop-blur px-4 py-1.5 text-sm font-semibold text-accent transition-all duration-700 delay-200 ${
                    i === index
                      ? "translate-y-0 opacity-100"
                      : "translate-y-4 opacity-0"
                  }`}
                >
                  {slide.eyebrow}
                </span>
                <h1
                  className={`mt-5 text-3xl sm:text-5xl font-extrabold leading-[1.25] text-white transition-all duration-700 delay-300 ${
                    i === index
                      ? "translate-y-0 opacity-100"
                      : "translate-y-4 opacity-0"
                  }`}
                >
                  {slide.title}
                </h1>
                <p
                  className={`mt-5 text-base sm:text-lg text-white/85 transition-all duration-700 delay-500 ${
                    i === index
                      ? "translate-y-0 opacity-100"
                      : "translate-y-4 opacity-0"
                  }`}
                >
                  {slide.subtitle}
                </p>
                <div
                  className={`mt-8 flex flex-wrap justify-center sm:justify-start gap-4 transition-all duration-700 delay-700 ${
                    i === index
                      ? "translate-y-0 opacity-100"
                      : "translate-y-4 opacity-0"
                  }`}
                >
                  <Link
                    href="/products"
                    className="rounded-full bg-primary px-7 py-3.5 text-white font-semibold hover:bg-primary-dark transition-colors"
                  >
                    مشاهده محصولات
                  </Link>
                  <Link
                    href="/contact"
                    className="rounded-full border border-white/40 px-7 py-3.5 text-white font-semibold hover:bg-white/10 transition-colors"
                  >
                    تماس با ما
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}

      <button
        type="button"
        onClick={prev}
        aria-label="اسلاید قبلی"
        className="absolute top-1/2 start-3 sm:start-6 z-20 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/15 text-white backdrop-blur hover:bg-white/25 transition-colors sm:flex"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="rotate-180">
          <path
            d="M10.7 18.7a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 1 1 1.4 1.4L6 11.3h14a1 1 0 1 1 0 2H6l4.7 4.3a1 1 0 0 1 0 1.4Z"
            fill="currentColor"
          />
        </svg>
      </button>
      <button
        type="button"
        onClick={next}
        aria-label="اسلاید بعدی"
        className="absolute top-1/2 end-3 sm:end-6 z-20 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/15 text-white backdrop-blur hover:bg-white/25 transition-colors sm:flex"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path
            d="M10.7 18.7a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 1 1 1.4 1.4L6 11.3h14a1 1 0 1 1 0 2H6l4.7 4.3a1 1 0 0 1 0 1.4Z"
            fill="currentColor"
          />
        </svg>
      </button>

      <div className="absolute bottom-6 inset-x-0 z-20 flex items-center justify-center gap-2">
        {slides.map((slide, i) => (
          <button
            key={slide.title}
            type="button"
            onClick={() => goTo(i)}
            aria-label={`رفتن به اسلاید ${toFa(i + 1)}`}
            aria-current={i === index}
            className={`h-2 rounded-full transition-all ${
              i === index ? "w-8 bg-accent" : "w-2 bg-white/50 hover:bg-white/80"
            }`}
          />
        ))}
      </div>
    </section>
  );
}
