"use client";

import { useRef } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { ChevronLeft, ChevronRight } from "lucide-react";

import { VideoTemplateCompactCard } from "@/components/templates/video/VideoTemplateCompactCard";
import type { VideoCatalogTemplate } from "@/lib/video-templates-catalog";
import { cn } from "@/lib/utils";

interface VideoTemplatesCarouselRowProps {
  title: string;
  count: number;
  templates: VideoCatalogTemplate[];
  creatingTemplateId: string | null;
  onUseTemplate: (template: VideoCatalogTemplate) => void;
  showSeeAll?: boolean;
  categoryId?: string;
}

export function VideoTemplatesCarouselRow({
  title,
  count,
  templates,
  creatingTemplateId,
  onUseTemplate,
  showSeeAll = true,
  categoryId,
}: VideoTemplatesCarouselRowProps) {
  const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesCarouselRow");
  const scrollRef = useRef<HTMLDivElement>(null);

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

  return (
    <section className="relative">
      <div className="mb-4 flex items-center justify-between gap-4">
        <div className="flex items-center gap-2">
          <h2 className="font-heading text-lg font-bold text-neutral-900">
            {title}
          </h2>
          {count > 0 ? (
            <span className="rounded-md bg-rf-blue px-2 py-0.5 text-xs font-semibold text-white">
              {count}
            </span>
          ) : null}
        </div>
        {showSeeAll && categoryId ? (
          <Link
            href={`/templates?category=${categoryId}`}
            className="text-sm font-medium text-rf-blue hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rf-blue rounded-sm"
          >
            {t("seeAll")}
          </Link>
        ) : null}
      </div>

      <div className="relative">
        <button
          type="button"
          aria-label={t("scrollLeftAria", { title })}
          onClick={() => scroll("left")}
          className="absolute -left-3 top-[38%] z-10 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-gray-200 bg-white shadow-md transition-colors hover:bg-neutral-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rf-blue lg:flex"
        >
          <ChevronLeft className="h-5 w-5 text-neutral-700" aria-hidden />
        </button>

        <div
          ref={scrollRef}
          className={cn(
            "flex gap-4 overflow-x-auto pb-2 scroll-smooth",
            "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
          )}
        >
          {templates.map((template) => (
            <VideoTemplateCompactCard
              key={template.id}
              template={template}
              isUsing={creatingTemplateId === template.id}
              onUse={() => onUseTemplate(template)}
            />
          ))}
        </div>

        <button
          type="button"
          aria-label={t("scrollRightAria", { title })}
          onClick={() => scroll("right")}
          className="absolute -right-3 top-[38%] z-10 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-gray-200 bg-white shadow-md transition-colors hover:bg-neutral-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rf-blue lg:flex"
        >
          <ChevronRight className="h-5 w-5 text-neutral-700" aria-hidden />
        </button>
      </div>
    </section>
  );
}
