// app/blog/page.tsx
import Link from "next/link";

interface BlogPost {
  _id: string;
  title: string;
  slug: string;
  excerpt: string;
  createdAt: string;
  authorData?: { firstName: string; lastName: string };
  categoryData?: { name: string; slug: string };
}

interface PaginationDTO {
  total: number;
  page: number;
  limit: number;
  itemsPerPage: number;
  totalPages: number;
  hasNextPage: boolean;
  hasPrevPage: boolean;
  nextPage: number | null;
  prevPage: number | null;
}

async function getBlogPosts(page = 1, category = ""): Promise<{ data: BlogPost[]; pagination: PaginationDTO }> {
  const url = new URL(`http://localhost:3000/api/v1/projects/${process.env.NEXT_PUBLIC_BLOG_PROJECT_ID}/posts`);
  url.searchParams.set("status", "published");
  url.searchParams.set("page", String(page));
  url.searchParams.set("limit", "10");
  if (category) url.searchParams.set("category", category);

  const res = await fetch(url.toString(), {
    headers: {
      "x-api-key": process.env.BLOG_API_KEY || "",
    },
    // Revalidate every 60 seconds (Incremental Static Regeneration)
    next: { revalidate: 60, tags: ["blog-posts"] },
  });

  if (!res.ok) throw new Error("Failed to fetch blog posts");
  const json = await res.json();
  return { data: json.data, pagination: json.pagination };
}

export default async function BlogIndexPage({ searchParams }: { searchParams: Promise<{ page?: string; category?: string }> }) {
  const params = await searchParams;
  const page = parseInt(params.page || "1");
  const { data: posts, pagination } = await getBlogPosts(page, params.category || "");

  return (
    <main className="max-w-4xl mx-auto py-12 px-4 space-y-8">
      <h1 className="text-3xl font-bold">Latest Articles (Page {pagination.page} of {pagination.totalPages})</h1>
      <div className="grid gap-6">
        {posts.map((post) => (
          <article key={post._id} className="p-6 rounded-xl border border-gray-200">
            <span className="text-xs font-semibold text-amber-600">{post.categoryData?.name}</span>
            <h2 className="text-xl font-bold mt-1">
              <Link href={`/blog/${post.slug}`}>{post.title}</Link>
            </h2>
            <p className="text-gray-600 text-sm mt-2">{post.excerpt}</p>
          </article>
        ))}
      </div>

      {/* Pagination Controls using DTO flags */}
      <div className="flex justify-between items-center pt-6 border-t border-gray-200">
        {pagination.hasPrevPage ? (
          <Link href={`/blog?page=${pagination.prevPage}`} className="px-4 py-2 bg-gray-100 rounded-lg">← Previous Page</Link>
        ) : <span />}
        <span className="text-xs text-gray-500">Total {pagination.total} Posts</span>
        {pagination.hasNextPage ? (
          <Link href={`/blog?page=${pagination.nextPage}`} className="px-4 py-2 bg-gray-900 text-white rounded-lg">Next Page →</Link>
        ) : <span />}
      </div>
    </main>
  );
}

// hooks/useBlogPosts.ts
import { useEffect, useState } from "react";

export function useBlogPosts(projectId: string, apiKey: string, page = 1, category = "") {
  const [posts, setPosts] = useState([]);
  const [pagination, setPagination] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchPosts() {
      setLoading(true);
      try {
        const url = new URL(`http://localhost:3000/api/v1/projects/${projectId}/posts`);
        url.searchParams.set("status", "published");
        url.searchParams.set("page", String(page));
        if (category) url.searchParams.set("category", category);

        const res = await fetch(url.toString(), {
          headers: { "x-api-key": apiKey }
        });
        const json = await res.json();
        if (json.success) {
          setPosts(json.data);
          setPagination(json.pagination);
        } else {
          setError(json.message);
        }
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchPosts();
  }, [projectId, apiKey, page, category]);

  return { posts, pagination, loading, error };
}

---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
  const res = await fetch(`http://localhost:3000/api/v1/projects/${import.meta.env.BLOG_PROJECT_ID}/posts?status=published&limit=100`, {
    headers: { "x-api-key": import.meta.env.BLOG_API_KEY }
  });
  const json = await res.json();

  return json.data.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<html lang="en">
  <head>
    <title>{post.title}</title>
  </head>
  <body className="container mx-auto py-10 px-4">
    <h1 className="text-4xl font-bold">{post.title}</h1>
    <div className="prose mt-6" set:html={post.content} />
  </body>
</html>

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Blog Feed</title>
</head>
<body>
  <div id="blog-container">Loading articles...</div>

  <script>
    async function loadBlogFeed(page = 1) {
      const container = document.getElementById("blog-container");
      try {
        const response = await fetch(`http://localhost:3000/api/v1/projects/YOUR_PROJECT_ID/posts?status=published&page=${page}&limit=10`, {
          headers: { "x-api-key": "sk_live_YOUR_API_KEY" }
        });
        const json = await response.json();

        container.innerHTML = json.data.map(post => `
          <div class="post-card">
            <h3>${post.title}</h3>
            <p>${post.excerpt}</p>
          </div>
        `).join("");
      } catch (err) {
        container.innerHTML = "<p>Failed to load posts.</p>";
      }
    }

    loadBlogFeed();
  </script>
</body>
</html>

// .env.local
// NEXT_PUBLIC_BLOG_CMS_URL="http://localhost:3000/api/v1"
// NEXT_PUBLIC_BLOG_FORM_ID="6a83f200f18109585cde0f7e"
// NEXT_PUBLIC_BLOG_API_KEY="sk_live_YOUR_PROJECT_API_KEY"

<!-- Pure HTML Form (using action URL with key) -->
<form action="http://localhost:3000/api/v1/f/YOUR_FORM_ID?key=sk_live_YOUR_API_KEY" method="POST">
  <!-- Optional submission type tag -->
  <input type="hidden" name="type" value="INQUIRY" />

  <label>Full Name</label>
  <input type="text" name="fullName" required />

  <label>Email Address</label>
  <input type="email" name="email" required />

  <label>Message</label>
  <textarea name="message" required></textarea>

  <button type="submit">Submit Form</button>
</form>

<!-- Or via JavaScript fetch() using environment variables -->
<script>
  async function submitContactForm(formData) {
    const url = `${process.env.NEXT_PUBLIC_BLOG_CMS_URL}/f/${process.env.NEXT_PUBLIC_BLOG_FORM_ID}?key=${process.env.NEXT_PUBLIC_BLOG_API_KEY}`;

    const response = await fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        type: "INQUIRY",
        fullName: formData.fullName,
        email: formData.email,
        message: formData.message
      })
    });
    const result = await response.json();
    console.log(result);
  }
</script>