"use client";

import { Button } from "@heroui/react";
import Image from "next/image";
import Link from "next/link";
import { useRef } from "react";
import { TOP_CATEGORY_SLUGS } from "@/lib/shop/constants";
import { SectionHeading } from "@/utils/common/heading/section_heading";

function ChevronLeftIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M15 18l-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M9 18l6-6-6-6" />
    </svg>
  );
}

const BG_CLASSES = [
  "bg-[var(--coral-light)]",
  "bg-[var(--brand-light)]/40",
  "bg-[var(--warm-light)]",
  "bg-[var(--coral-light)]",
  "bg-[var(--brand-light)]/40",
  "bg-[var(--warm-light)]",
] as const;

function slugToTitle(slug: string): string {
  return slug.charAt(0).toUpperCase() + slug.slice(1);
}

export function CategorySection() {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = (direction: "left" | "right") => {
    if (!scrollRef.current) return;
    const step = scrollRef.current.clientWidth * 0.6;
    scrollRef.current.scrollBy({
      left: direction === "left" ? -step : step,
      behavior: "smooth",
    });
  };

  return (
    <section
      aria-label="Top categories"
      className="w-full py-10 md:py-12"
    >
      <div className="mx-auto max-w-7xl min-w-0 px-4 md:px-6">
        <div className="flex flex-row items-center justify-between gap-4">
          <SectionHeading title="Top Categories" />
          <div className="flex items-center gap-2 shrink-0 lg:hidden">
            <Button
              isIconOnly
              variant="ghost"
              aria-label="Scroll categories left"
              onPress={() => scroll("left")}
              className="min-w-8 w-8 h-8 text-[var(--foreground)]"
            >
              <ChevronLeftIcon className="size-5" />
            </Button>
            <Button
              isIconOnly
              variant="ghost"
              aria-label="Scroll categories right"
              onPress={() => scroll("right")}
              className="min-w-8 w-8 h-8 text-[var(--foreground)]"
            >
              <ChevronRightIcon className="size-5" />
            </Button>
          </div>
        </div>

        <div
          ref={scrollRef}
          className="mt-6 flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-2 md:mt-8 lg:grid lg:grid-cols-6 lg:overflow-visible lg:pb-0"
          style={{ scrollSnapType: "x proximity" }}
        >
          {TOP_CATEGORY_SLUGS.map((slug, i) => {
            const title = slugToTitle(slug);
            const href = `/shop/${slug}`;
            const src = `/icons/icon_${slug}.svg`;
            return (
              <Link
                key={href}
                href={href}
                className="flex shrink-0 flex-col items-center gap-3 rounded-2xl transition-[transform] duration-[var(--transition-base)] hover:scale-[1.02] lg:shrink"
                style={{ scrollSnapAlign: "start" }}
              >
                <span
                  className={`flex h-24 w-24 items-center justify-center rounded-xl md:h-28 md:w-28 ${BG_CLASSES[i]}`}
                >
                  <Image
                    src={src}
                    alt=""
                    width={48}
                    height={48}
                    className="h-10 w-10 object-contain md:h-12 md:w-12"
                  />
                </span>
                <span className="text-center font-sans text-sm font-medium text-[var(--foreground)] md:text-base">
                  {title}
                </span>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}
