"use client";

import { useRef } from "react";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { blogHref, blogImage, type BlogPost } from "@/lib/blog";
import { formatFaDate } from "@/lib/format";

type LocalPost = {
  slug: string;
  title: string;
  excerpt: string;
  date: string;
  image: string;
};

export function BlogCarousel({
  posts = [],
  fallback = [],
}: {
  posts?: BlogPost[];
  fallback?: LocalPost[];
}) {
  const scroller = useRef<HTMLDivElement>(null);
  const usingApi = posts.length > 0;

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

  return (
    <section id="blog" className="py-20 sm:py-24">
      <Container>
        <div className="mb-10">
          <div className="flex items-center gap-3">
            <span className="h-[3px] w-8 bg-brand" />
            <p className="section-kicker">Blog</p>
          </div>
          <div className="mt-3 flex items-center justify-between gap-4">
            <h2 className="text-3xl font-extrabold tracking-tight sm:text-[40px]">آخرین مقالات</h2>
            <div className="flex shrink-0 items-center gap-2">
              <button
                type="button"
                onClick={() => scrollByCard(1)}
                className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
                aria-label="قبلی"
              >
                <ChevronRight className="size-4" />
              </button>
              <button
                type="button"
                onClick={() => scrollByCard(-1)}
                className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
                aria-label="بعدی"
              >
                <ChevronLeft className="size-4" />
              </button>
              <Link href="/blog" className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
                مشاهده همه
              </Link>
            </div>
          </div>
          <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
            نکته‌هایی از تعمیرگاه و بورس قطعات — برای مصرف‌کننده و همکار.
          </p>
        </div>

        <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto">
          {usingApi
            ? posts.map((post) => (
                <article
                  key={post.id}
                  className="w-[min(85vw,340px)] shrink-0 snap-start rounded-2xl border border-line bg-white p-3"
                >
                  <Link href={blogHref(post)} className="group block">
                    <div className="overflow-hidden rounded-xl">
                      <Placeholder
                        src={blogImage(post)}
                        alt={post.title}
                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                      />
                    </div>
                    <p className="mt-3 text-[12px] text-muted">
                      {formatFaDate(post.publishedAt || post.createdAt)}
                    </p>
                    <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
                    {post.abstract ? (
                      <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.abstract}</p>
                    ) : null}
                  </Link>
                </article>
              ))
            : fallback.map((post) => (
                <article
                  key={post.slug}
                  className="w-[min(85vw,340px)] shrink-0 snap-start rounded-2xl border border-line bg-white p-3"
                >
                  <Link href={blogHref({ id: post.slug, title: post.title })} className="group block">
                    <div className="overflow-hidden rounded-xl">
                      <Placeholder
                        src={post.image}
                        alt={post.title}
                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                      />
                    </div>
                    <p className="mt-3 text-[12px] text-muted">{post.date}</p>
                    <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
                    <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
                  </Link>
                </article>
              ))}
        </div>
      </Container>
    </section>
  );
}