// app/(auth)/post-categories/page.tsx
import { Suspense } from 'react';
import { PostCategoriesForm } from '@/components/auth/PostCategoriesForm';
import { getDynamicImages } from '@/lib/api/client';

const SECURITY_KEY = process.env.NEXT_PUBLIC_SECURITY_KEY!;
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

async function getPostCategoriesData() {
  try {
    // ✅ Fetch all three - images, storeLinks, and pageData
    const [images, storeLinks, pageData] = await Promise.all([
      getDynamicImages(SECURITY_KEY),
      fetch(`${BASE_URL}/social/getStoreIcons`).then(res => res.json()).catch(() => ({ data: [] })),
      fetch(`${BASE_URL}/page/getPageById?pageId=69019418776706b9e475a8d6`).then(res => res.json()).catch(() => ({ data: null })),
    ]);
    
    // ✅ Also fetch categories
    const categories = await fetch(`${BASE_URL}/post/categories?securityKey=${SECURITY_KEY}`)
      .then(res => res.json())
      .catch(() => ({ data: [] }));
    
    return {
      logoImage: images?.data,
      storeLinks: storeLinks?.data || [],
      pageData: pageData?.data,
      categories: categories?.data || [],
    };
  } catch (error) {
    return {
      logoImage: null,
      storeLinks: [],
      pageData: null,
      categories: [],
    };
  }
}

export default async function PostCategoriesPage() {
  const { logoImage, storeLinks, pageData, categories } = await getPostCategoriesData();

  return (
    <div className="min-h-screen flex items-center justify-center">
      <Suspense fallback={<div className="w-[450px] h-[500px] bg-gray-100 animate-pulse rounded-2xl" />}>
        <PostCategoriesForm 
          logoImage={logoImage} 
          storeLinks={storeLinks}
          pageData={pageData}
          categories={categories}
        />
      </Suspense>
    </div>
  );
}