"use client";

import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Placeholder } from "@/components/Placeholder";
import { SlotLink } from "@/components/SlotLink";
import type { SlotMediaItem } from "@/lib/static-images";

const SLIDE_W = "min(1280px, calc(100vw - 5rem))";
const GAP = "1rem";
const INTERVAL_MS = 6000;
const TRANSITION_MS = 700;

export function Hero({ slides }: { slides: SlotMediaItem[]; aspectRatio?: string }) {
  const [active, setActive] = useState(0);
  const [shift, setShift] = useState(0);
  const [animating, setAnimating] = useState(false);
  const [paused, setPaused] = useState(false);
  const lock = useRef(false);
  const shiftRef = useRef(0);
  const countRef = useRef(slides.length);
  countRef.current = slides.length;

  const finishTransition = () => {
    if (!lock.current) return;
    lock.current = false;
    const delta = shiftRef.current;
    const total = countRef.current;
    shiftRef.current = 0;
    setActive((current) => (current + delta + total) % total);
    setShift(0);
    setAnimating(false);
  };

  const go = (direction: -1 | 1) => {
    if (countRef.current < 2 || lock.current) return;
    lock.current = true;
    shiftRef.current = direction;
    setAnimating(true);
    setShift(direction);
    window.setTimeout(() => {
      if (lock.current && shiftRef.current === direction) finishTransition();
    }, TRANSITION_MS + 80);
  };

  useEffect(() => {
    setActive(0);
    setShift(0);
    shiftRef.current = 0;
    setAnimating(false);
    lock.current = false;
  }, [slides.length]);

  useEffect(() => {
    if (slides.length < 2 || paused || animating) return;
    const timer = window.setInterval(() => go(1), INTERVAL_MS);
    return () => window.clearInterval(timer);
  }, [paused, animating, slides.length, active]);

  if (slides.length === 0) return null;

  const count = slides.length;
  const offsets =
    count === 1
      ? ([0] as number[])
      : shift > 0
        ? ([-1, 0, 1, 2] as number[])
        : shift < 0
          ? ([-2, -1, 0, 1] as number[])
          : ([-1, 0, 1] as number[]);

  return (
    <section className="relative overflow-x-clip bg-white pt-5 pb-8">
      <div
        className="relative h-[min(62vh,640px)] min-h-[340px]"
        style={{ ["--slide-w" as string]: SLIDE_W, ["--slide-gap" as string]: GAP }}
        dir="ltr"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div
          className="absolute inset-0"
          style={{
            transform: `translateX(calc(${-shift} * (var(--slide-w) + var(--slide-gap))))`,
            transition: animating
              ? `transform ${TRANSITION_MS}ms cubic-bezier(0.22, 1, 0.36, 1)`
              : "none",
          }}
          onTransitionEnd={(event) => {
            if (event.target !== event.currentTarget) return;
            if (event.propertyName !== "transform") return;
            finishTransition();
          }}
        >
          {offsets.map((offset) => {
            const index = (active + offset + count * 10) % count;
            const item = slides[index];
            const isActiveSlot = offset === shift;

            return (
              <article
                key={`slot-${offset}`}
                className="absolute top-0 h-full"
                style={{
                  width: "var(--slide-w)",
                  left: `calc(50% - var(--slide-w) / 2 + ${offset} * (var(--slide-w) + var(--slide-gap)))`,
                  zIndex: isActiveSlot ? 3 : 2,
                }}
              >
                {isActiveSlot ? (
                  <SlotLink href={item.href} className="relative block h-full overflow-hidden rounded-2xl">
                    <Placeholder
                      src={item.image}
                      fallbackSrc={item.fallbackSrc}
                      alt={item.title ?? ""}
                      className="h-full w-full object-cover"
                    />
                    <div
                      className="absolute inset-x-4 bottom-4 z-10 rounded-2xl px-5 py-3.5 sm:inset-x-5 sm:bottom-5 sm:px-7 sm:py-4"
                      style={{
                        background:
                          "linear-gradient(180deg, rgb(48 52 56 / 0.72) 0%, rgb(18 20 22 / 0.82) 100%)",
                        backdropFilter: "blur(22px) saturate(180%)",
                        WebkitBackdropFilter: "blur(22px) saturate(180%)",
                        border: "1px solid rgb(255 255 255 / 0.22)",
                        boxShadow:
                          "inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 28px rgb(0 0 0 / 0.28)",
                      }}
                    >
                      <div dir="rtl" className="flex items-center justify-between gap-4">
                        <div className="flex min-w-0 items-center gap-3 sm:gap-5">
                          <h1 className="truncate text-[16px] font-extrabold text-white sm:text-[22px]">
                            {item.title || "فروشگاه برادران برقعی"}
                          </h1>
                          <span className="hidden h-[3px] w-10 shrink-0 rounded-full bg-brand sm:block" />
                          <span className="hidden h-6 w-px shrink-0 bg-white/20 sm:block" />
                          {item.kicker ? (
                            <p className="font-latin hidden shrink-0 text-[11px] tracking-[0.2em] text-white/60 uppercase sm:block">
                              {item.kicker}
                            </p>
                          ) : null}
                        </div>
                        <span className="inline-flex shrink-0 rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white sm:px-6 sm:py-3 sm:text-[14px]">
                          مشاهده قطعات
                        </span>
                      </div>
                    </div>
                  </SlotLink>
                ) : (
                  <button
                    type="button"
                    className="relative block h-full w-full overflow-hidden rounded-2xl"
                    onClick={() => go(offset < shift ? -1 : 1)}
                    aria-label={item.title}
                    disabled={animating}
                  >
                    <Placeholder
                      src={item.image}
                      fallbackSrc={item.fallbackSrc}
                      alt={item.title ?? ""}
                      className="h-full w-full object-cover"
                    />
                    <span className="absolute inset-0 bg-white/35" />
                  </button>
                )}
              </article>
            );
          })}
        </div>

        {count > 1 ? (
          <div
            className="pointer-events-none absolute inset-y-0 left-1/2 z-10 -translate-x-1/2"
            style={{ width: "var(--slide-w)" }}
          >
            <button
              type="button"
              onClick={() => go(1)}
              disabled={animating}
              className="pointer-events-auto absolute top-1/2 right-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm disabled:opacity-60"
              aria-label="اسلاید راست"
            >
              <ChevronRight className="size-5" />
            </button>
            <button
              type="button"
              onClick={() => go(-1)}
              disabled={animating}
              className="pointer-events-auto absolute top-1/2 left-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm disabled:opacity-60"
              aria-label="اسلاید چپ"
            >
              <ChevronLeft className="size-5" />
            </button>
          </div>
        ) : null}
      </div>

      {count > 1 ? (
        <div className="relative z-10 mt-5 flex justify-center gap-2">
          {slides.map((item, i) => (
            <button
              key={item.id}
              type="button"
              disabled={animating}
              onClick={() => {
                if (i === active || lock.current) return;
                const forward = (i - active + count) % count;
                const backward = (active - i + count) % count;
                if (forward <= backward) go(1);
                else go(-1);
              }}
              className={`h-1.5 rounded-full transition-all ${i === active && shift === 0 ? "w-8 bg-brand" : "w-3 bg-ink/20"}`}
              aria-label={`اسلاید ${i + 1}`}
            />
          ))}
        </div>
      ) : null}
    </section>
  );
}