"use client";

import { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { isStoredUploadUrl } from "@/lib/uploads/url";

const AUTO_PLAY_MS = 5000;

type SliderItem = { id: string; imageUrl: string; orderIndex: number };

export function HomeSlider() {
  const [items, setItems] = useState<SliderItem[]>([]);
  const [index, setIndex] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/slider")
      .then((r) => r.json())
      .then((data) => {
        setItems(Array.isArray(data) ? data : []);
        setIndex(0);
      })
      .catch(() => setItems([]))
      .finally(() => setLoading(false));
  }, []);

  const goTo = useCallback(
    (i: number) => {
      if (items.length === 0) return;
      setIndex(() => {
        const next = i < 0 ? items.length - 1 : i >= items.length ? 0 : i;
        return next;
      });
    },
    [items.length]
  );

  useEffect(() => {
    if (items.length <= 1) return;
    const t = setInterval(() => goTo(index + 1), AUTO_PLAY_MS);
    return () => clearInterval(t);
  }, [items.length, index, goTo]);

  if (loading || items.length === 0) return null;

  const current = items[index];
  const isExternal = current.imageUrl.startsWith("http");

  return (
    <section className="relative w-full overflow-hidden bg-muted">
      <div className="relative aspect-[21/9] min-h-[200px] md:min-h-[280px] w-full">
        <AnimatePresence mode="wait" initial={false}>
          <motion.div
            key={current.id}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.6 }}
            className="absolute inset-0"
          >
            <Image
              src={current.imageUrl.startsWith("/") ? current.imageUrl : "/cards/placeholder.svg"}
              alt=""
              fill
              className="object-cover"
              priority={index === 0}
              unoptimized={isExternal || isStoredUploadUrl(current.imageUrl)}
              sizes="100vw"
            />
          </motion.div>
        </AnimatePresence>
      </div>

      {items.length > 1 && (
        <>
          <button
            type="button"
            onClick={() => goTo(index - 1)}
            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 size-12 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center transition-colors"
            aria-label="قبلی"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M15 18l-6-6 6-6" />
            </svg>
          </button>
          <button
            type="button"
            onClick={() => goTo(index + 1)}
            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 size-12 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center transition-colors"
            aria-label="بعدی"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M9 18l6-6-6-6" />
            </svg>
          </button>

          <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2 z-10">
            {items.map((_, i) => (
              <button
                key={i}
                type="button"
                onClick={() => setIndex(i)}
                className={`size-2 rounded-full transition-all ${
                  i === index ? "bg-white w-6" : "bg-white/50 hover:bg-white/70"
                }`}
                aria-label={`اسلاید ${i + 1}`}
              />
            ))}
          </div>
        </>
      )}
    </section>
  );
}