import { useEffect, useRef } from "react";
import { useQuery } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { listBanners } from "@/lib/services.functions";
import { trackBannerEvent } from "@/lib/banners.functions";
import { cn } from "@/lib/utils";
import { ArrowRight } from "lucide-react";

type Banner = {
  id: string;
  title: string;
  subtitle: string | null;
  image_url: string | null;
  link_url: string | null;
  cta_label: string | null;
  variant: string;
};

const VARIANT_CLASS: Record<string, string> = {
  gradient: "bg-gradient-primary text-primary-foreground",
  image: "bg-muted text-foreground",
  solid: "bg-primary text-primary-foreground",
  minimal: "bg-card text-card-foreground border border-border",
};

export function PromoBanners({ placement = "home" }: { placement?: string }) {
  const fetchBanners = useServerFn(listBanners);
  const track = useServerFn(trackBannerEvent);
  const seen = useRef<Set<string>>(new Set());
  const scroller = useRef<HTMLDivElement>(null);

  const { data } = useQuery({
    queryKey: ["banners", placement],
    queryFn: () => fetchBanners({ data: { placement } }),
    staleTime: 60_000,
  });

  const banners = (data ?? []) as Banner[];

  useEffect(() => {
    banners.forEach((b) => {
      if (seen.current.has(b.id)) return;
      seen.current.add(b.id);
      void track({ data: { id: b.id, event: "impression" } }).catch(() => {});
    });
  }, [banners, track]);

  // Auto-slide through the carousel every 4s; pauses while the user touches it.
  useEffect(() => {
    if (banners.length < 2) return;
    const el = scroller.current;
    if (!el) return;
    let paused = false;
    const pause = () => {
      paused = true;
      window.setTimeout(() => (paused = false), 8000);
    };
    el.addEventListener("pointerdown", pause);
    const timer = window.setInterval(() => {
      if (paused || !el) return;
      const step = el.clientWidth * 0.75;
      const next = el.scrollLeft + step;
      el.scrollTo({ left: next >= el.scrollWidth - el.clientWidth - 8 ? 0 : next, behavior: "smooth" });
    }, 4000);
    return () => {
      window.clearInterval(timer);
      el.removeEventListener("pointerdown", pause);
    };
  }, [banners.length]);

  if (!banners.length) return null;

  return (
    <div
      ref={scroller}
      className="-mx-1 flex gap-3 overflow-x-auto px-1 pb-1 snap-x snap-mandatory scrollbar-none scroll-smooth"
    >
      {banners.map((b) => {
        const variant = VARIANT_CLASS[b.variant] ?? VARIANT_CLASS.gradient;
        const Inner = (
          <div
            className={cn(
              "relative h-24 w-64 shrink-0 snap-start overflow-hidden rounded-2xl p-3 shadow-card transition active:scale-[0.98]",
              variant,
            )}
          >
            {b.image_url && (
              <img
                src={b.image_url}
                alt=""
                loading="lazy"
                className={cn(
                  "absolute inset-0 h-full w-full object-cover",
                  b.variant === "image" ? "opacity-100" : "opacity-35",
                )}
              />
            )}
            {b.variant === "image" && b.image_url && (
              <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent" />
            )}
            <div className={cn("relative flex h-full flex-col justify-center", b.variant === "image" && b.image_url && "text-white")}>
              <div className="text-[13px] font-semibold leading-tight">{b.title}</div>
              {b.subtitle && <div className="mt-0.5 text-[11px] opacity-90 line-clamp-2">{b.subtitle}</div>}
              {b.cta_label && b.link_url && (
                <span className="mt-1.5 inline-flex w-fit items-center gap-1 rounded-full bg-background/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide backdrop-blur">
                  {b.cta_label} <ArrowRight className="h-3 w-3" />
                </span>
              )}
            </div>
          </div>
        );
        return b.link_url ? (
          <a
            key={b.id}
            href={b.link_url}
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => void track({ data: { id: b.id, event: "click" } }).catch(() => {})}
          >
            {Inner}
          </a>
        ) : (
          <div key={b.id}>{Inner}</div>
        );
      })}
    </div>
  );
}