"use client";

import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type ReactNode,
} from "react";
import Link from "next/link";

import styles from "../blog.module.css";

/**
 * Horizontal topic row: title + optional "view all" link + prev/next controls
 * over a scroll-snapping track (design `.row-head` + `.carousel`).
 */
export function Carousel({
  title,
  blurb,
  viewAllHref,
  viewAllLabel = "View all",
  children,
}: {
  title: string;
  blurb?: string;
  viewAllHref?: string;
  viewAllLabel?: string;
  children: ReactNode;
}) {
  const track = useRef<HTMLDivElement>(null);
  const [atStart, setAtStart] = useState(true);
  const [atEnd, setAtEnd] = useState(false);

  const update = useCallback(() => {
    const el = track.current;
    if (!el) return;
    setAtStart(el.scrollLeft < 8);
    setAtEnd(el.scrollLeft > el.scrollWidth - el.clientWidth - 8);
  }, []);

  useEffect(() => {
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, [update]);

  const step = (dir: 1 | -1) => {
    const el = track.current;
    if (!el) return;
    const card = el.firstElementChild as HTMLElement | null;
    const amount = card ? card.getBoundingClientRect().width + 22 : 320;
    el.scrollBy({ left: dir * amount, behavior: "smooth" });
  };

  return (
    <>
      <div className={styles.rowHead}>
        <div className={styles.rhL}>
          <h2>{title}</h2>
          {blurb ? <p>{blurb}</p> : null}
        </div>
        <div className={styles.rowCtrl}>
          {viewAllHref ? (
            <Link className={styles.more} href={viewAllHref}>
              {viewAllLabel}
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </Link>
          ) : null}
          <button
            type="button"
            className={styles.navBtn}
            onClick={() => step(-1)}
            disabled={atStart}
            aria-label="Previous"
          >
            <svg
              width="17"
              height="17"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M15 18l-6-6 6-6" />
            </svg>
          </button>
          <button
            type="button"
            className={styles.navBtn}
            onClick={() => step(1)}
            disabled={atEnd}
            aria-label="Next"
          >
            <svg
              width="17"
              height="17"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M9 18l6-6-6-6" />
            </svg>
          </button>
        </div>
      </div>
      <div className={styles.carousel} ref={track} onScroll={update}>
        {children}
      </div>
    </>
  );
}