"use client";

import { useState } from "react";
import type { BlogPost } from "@/services/joomlaService";
import { BlogCard } from "./BlogCard";

interface BlogLoadMoreProps {
  initialOffset: number;
  total: number;
  /** "hits" for the real "Most Viewed" ordering; "created" for date order. */
  sort?: "created" | "hits";
  buttonText?: string;
}

// The real site's own AJAX chunk size (`var offset = 10;` in blog.php's JS),
// matched here for fidelity even though the mechanism (our own /api/blog
// route vs. their `com_contact` controller) differs.
const CHUNK_SIZE = 10;

export function BlogLoadMore({
  initialOffset,
  total,
  sort = "created",
  buttonText = "Load More",
}: BlogLoadMoreProps) {
  const [posts, setPosts] = useState<BlogPost[]>([]);
  const [offset, setOffset] = useState(initialOffset);
  const [loading, setLoading] = useState(false);

  const hasMore = offset < total;

  const loadMore = async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/blog?offset=${offset}&limit=${CHUNK_SIZE}&sort=${sort}`);
      const json = await res.json();
      setPosts((prev) => [...prev, ...(json.data ?? [])]);
      setOffset((prev) => prev + CHUNK_SIZE);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {posts.length > 0 && (
        <div className="flex flex-wrap justify-between gap-y-[30px] mb-6">
          {posts.map((post) => (
            <div key={post.id} className="w-full sm:w-[48%]">
              <BlogCard post={post} variant="recent" />
            </div>
          ))}
        </div>
      )}

      {hasMore && (
        <div className="text-center mt-[30px]">
          <button
            onClick={loadMore}
            disabled={loading}
            className="inline-block rounded-[3px] bg-[#f58e0e] hover:bg-[#f39827] px-6 py-2.5 text-lg leading-[18px] text-white transition-colors disabled:opacity-60 cursor-pointer shadow-xs"
          >
            {loading ? "Loading…" : buttonText}
          </button>
        </div>
      )}
    </>
  );
}