"use client";

import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
import ProductTileImage from "@/components/ui/ProductTileImage";
import { formatCurrency, formatUnit } from "@/lib/utils";

export type RailProduct = {
  id: number;
  name: string;
  href: string;
  image: string | null;
  fallbackImage: string;
  category: string | null;
  subCategory: string | null;
  /** Selling unit, e.g. "Metric Ton". */
  unit: string | null;
  /** Cheapest live ex-works price, when a seller publishes one (4.10). */
  fromPrice: number | null;
};

/** Horizontally scrolling product cards: swipe on touch, arrows on desktop. */
export default function ProductRail({ products }: { products: RailProduct[] }) {
  const trackRef = useRef<HTMLDivElement>(null);
  const [edges, setEdges] = useState({ start: true, end: false });

  const sync = useCallback(() => {
    const el = trackRef.current;
    if (!el) return;
    setEdges({ start: el.scrollLeft <= 4, end: el.scrollLeft + el.clientWidth >= el.scrollWidth - 4 });
  }, []);

  useEffect(() => {
    sync();
    const el = trackRef.current;
    if (!el) return;
    el.addEventListener("scroll", sync, { passive: true });
    window.addEventListener("resize", sync);
    return () => {
      el.removeEventListener("scroll", sync);
      window.removeEventListener("resize", sync);
    };
  }, [sync]);

  const scrollBy = (dir: 1 | -1) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * Math.max(260, el.clientWidth * 0.8), behavior: "smooth" });
  };

  return (
    <div className="relative">
      <div className="absolute -top-14 right-0 hidden gap-2 sm:flex">
        {([-1, 1] as const).map((dir) => (
          <button
            key={dir}
            type="button"
            onClick={() => scrollBy(dir)}
            disabled={dir === -1 ? edges.start : edges.end}
            aria-label={dir === -1 ? "Previous products" : "Next products"}
            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition-colors hover:border-[#CC1414] hover:bg-[#CC1414] hover:text-white disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-slate-200 disabled:hover:bg-white disabled:hover:text-slate-700"
          >
            {dir === -1 ? <ChevronLeft size={18} aria-hidden /> : <ChevronRight size={18} aria-hidden />}
          </button>
        ))}
      </div>

      <div
        ref={trackRef}
        className="-mx-4 -mb-6 -mt-2 flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth px-4 pb-10 pt-2 [scrollbar-width:none] sm:-mx-6 sm:px-6 lg:mx-0 lg:px-0 [&::-webkit-scrollbar]:hidden"
      >
        {products.map((p) => (
          <Link
            key={p.id}
            href={p.href}
            className="group w-[72%] shrink-0 snap-start overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200/70 transition-all hover:-translate-y-1 hover:shadow-xl hover:ring-red-100 sm:w-[44%] md:w-[31%] lg:w-[calc((100%-3rem)/4)]"
          >
            <div className="relative aspect-square overflow-hidden bg-slate-100">
              <ProductTileImage
                src={p.image}
                fallbackSrc={p.fallbackImage}
                alt={p.name}
                sizes="(max-width: 640px) 72vw, (max-width: 1024px) 31vw, 300px"
                className="transition-transform duration-500 group-hover:scale-105"
              />
              {p.subCategory ? (
                <span className="absolute left-3 top-3 rounded-full bg-white/90 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-slate-700 shadow-sm backdrop-blur">
                  {p.subCategory}
                </span>
              ) : null}
            </div>
            <div className="p-4">
              <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{p.category ?? "Steel"}</p>
              <h3 className="mt-1 truncate text-base font-bold text-slate-900 group-hover:text-[#CC1414]">{p.name}</h3>
              <div className="mt-3 flex items-center justify-between gap-2">
                {p.fromPrice ? (
                  <span className="min-w-0 truncate text-sm text-slate-500">
                    from <span className="font-bold text-slate-900">{formatCurrency(p.fromPrice)}</span>
                    {p.unit ? `/${formatUnit(p.unit)}` : ""}
                  </span>
                ) : (
                  <span className="truncate text-sm text-slate-500">
                    {p.unit ? `Sold per ${formatUnit(p.unit)}` : "Live offers"}
                  </span>
                )}
                <span className="inline-flex items-center gap-1 text-xs font-semibold text-[#CC1414]">
                  Get quote <ArrowRight size={13} className="transition-transform group-hover:translate-x-0.5" aria-hidden />
                </span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}