"use client";

import { useCallback, useEffect, useRef, useState } from "react";
// import Link from "next/link";
import { POSTS } from "@/data/blog-posts";
import { BlogCard } from "./BlogCard";

interface BlogRelatedProps {
  currentId: string;
}

export function BlogRelated({ currentId }: BlogRelatedProps) {
  const related = POSTS.filter((p) => p.id !== currentId).slice(0, 5);

  const trackRef = useRef<HTMLDivElement>(null);
  const [atStart, setAtStart] = useState(true);
  const [atEnd, setAtEnd] = useState(false);

  const updateArrows = useCallback(() => {
    const el = trackRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setAtStart(el.scrollLeft <= 1);
    setAtEnd(el.scrollLeft >= max - 1);
  }, []);

  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    updateArrows();
    el.addEventListener("scroll", updateArrows, { passive: true });
    window.addEventListener("resize", updateArrows);
    return () => {
      el.removeEventListener("scroll", updateArrows);
      window.removeEventListener("resize", updateArrows);
    };
  }, [updateArrows]);

  const slide = (dir: 1 | -1) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector<HTMLElement>(".b-rel-slide");
    const gap = parseFloat(getComputedStyle(el).columnGap) || 0;
    const step = card ? card.offsetWidth + gap : el.clientWidth * 0.85;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  if (related.length === 0) return null;

  return (
    <section className="b-related">
      <div className="b-wrap b-related-inner">
        <div className="b-related-head">
          <h2 className="b-related-heading">
            Keep{" "}
            <span className="b-serif" style={{ fontWeight: 500 }}>
              reading.
            </span>
          </h2>

          <div className="b-rel-controls">
            {/* <Link href="/blogs" className="b-link-arrow">
              All articles →
            </Link> */}
            <div className="b-rel-nav-group">
              <button
                type="button"
                className="b-rel-nav"
                aria-label="Previous articles"
                onClick={() => slide(-1)}
                disabled={atStart}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path
                    d="m15 18-6-6 6-6"
                    stroke="currentColor"
                    strokeWidth="2.2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
              <button
                type="button"
                className="b-rel-nav"
                aria-label="Next articles"
                onClick={() => slide(1)}
                disabled={atEnd}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path
                    d="m9 18 6-6-6-6"
                    stroke="currentColor"
                    strokeWidth="2.2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>

        <div className="b-rel-track" ref={trackRef}>
          {related.map((post) => (
            <div className="b-rel-slide" key={post.id}>
              <BlogCard post={post} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}