"use client";

import { useRef } from "react";
import { ArrowUpLeft, ChevronLeft, ChevronRight } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { SlotLink } from "@/components/SlotLink";
import { glossyBar } from "@/lib/glossy";
import { parseAspectRatio } from "@/lib/static-images";
import type { SlotMediaItem } from "@/lib/static-images";

export function CategoryShowcase({ items, aspectRatio }: { items: SlotMediaItem[]; aspectRatio?: string }) {
  const scroller = useRef<HTMLDivElement>(null);
  const ratio = parseAspectRatio(aspectRatio);

  const scrollByCard = (direction: number) => {
    const node = scroller.current;
    if (!node) return;
    const card = node.querySelector("article");
    const amount = card ? card.getBoundingClientRect().width + 20 : 300;
    node.scrollBy({ left: direction * amount, behavior: "smooth" });
  };

  return (
    <section id="parts" className="scroll-mt-28 bg-paper py-16 sm:py-20">
      <Container>
        <div className="mb-10 text-center">
          <div className="flex items-center justify-center gap-3">
            <span className="h-px w-10 bg-brand" />
            <p className="text-[13px] font-medium text-brand">دسته بندی ها</p>
            <span className="h-px w-10 bg-brand" />
          </div>
          <h2 className="mt-3 text-[22px] font-extrabold leading-snug sm:text-[28px]">
            دسته بندی فروشگاه لوازم خانگی برادران برقعی
          </h2>
        </div>
      </Container>

      <div className="relative">
        <button
          type="button"
          onClick={() => scrollByCard(1)}
          className="absolute top-1/2 right-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:right-6"
          aria-label="قبلی"
        >
          <ChevronRight className="size-4" />
        </button>
        <button
          type="button"
          onClick={() => scrollByCard(-1)}
          className="absolute top-1/2 left-3 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm sm:grid lg:left-6"
          aria-label="بعدی"
        >
          <ChevronLeft className="size-4" />
        </button>

        <div
          ref={scroller}
          className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto px-4 sm:px-6 lg:px-[max(1.5rem,calc((100vw-1280px)/2+1.5rem))]"
        >
          {items.map((item) => (
            <article
              key={item.id}
              className="group relative w-[min(78vw,280px)] shrink-0 snap-start overflow-hidden rounded-2xl"
              style={ratio ? { aspectRatio: ratio } : { height: 460 }}
            >
              <SlotLink href={item.href} className="block h-full">
                <Placeholder
                  src={item.image}
                  fallbackSrc={item.fallbackSrc}
                  alt={item.title ?? ""}
                  className="h-full w-full object-cover"
                />
                <div
                  className="absolute right-3 bottom-3 left-3 overflow-hidden rounded-2xl px-4 py-3.5"
                  style={glossyBar}
                >
                  <div className="flex h-8 items-center justify-between gap-3" dir="ltr">
                    <span className="grid size-8 shrink-0 place-items-center rounded-full border border-white/45 text-white">
                      <ArrowUpLeft className="size-3.5" />
                    </span>
                    <h3 className="truncate text-[14px] font-bold text-white" dir="rtl">
                      {item.title}
                    </h3>
                  </div>
                  {item.text ? (
                    <div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-500 ease-out group-hover:grid-rows-[1fr]">
                      <div className="min-h-0 overflow-hidden">
                        <p className="pt-3 text-right text-[13px] leading-7 text-white/75">{item.text}</p>
                      </div>
                    </div>
                  ) : null}
                </div>
              </SlotLink>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}