// src\app\(root)\website\[slug]\page.tsx

import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import WebsiteDetailClient from './WebsiteDetailClient';

// Generate metadata dynamically by calling the API
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  try {
    const { slug } = await params;
    
    // Fetch just enough data for metadata from API
    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
    const response = await fetch(`${baseUrl}/api/frontend/websites/${slug}`, {
      next: { revalidate: 300 },
    });
    
    const result = await response.json();

    if (!result.success || !result.data) {
      return {
        title: 'Website Not Found',
        description: 'The requested website could not be found.',
      };
    }

    const website = result.data;

    return {
      title: website.meta_title || `Guest Post on ${website.name} | ${website.domain}`,
      description: website.meta_description || `Get a high-quality guest post on ${website.name} (${website.domain}). Improve your SEO with dofollow backlinks from this authoritative website.`,
      openGraph: {
        title: website.meta_title || `Guest Post on ${website.name}`,
        description: website.meta_description || `Get a guest post on ${website.name} with dofollow backlinks.`,
        images: website.featured_image ? [website.featured_image] : [],
        type: 'website',
      },
      twitter: {
        card: 'summary_large_image',
        title: website.meta_title || `Guest Post on ${website.name}`,
        description: website.meta_description || `Get a guest post on ${website.name} with dofollow backlinks.`,
        images: website.featured_image ? [website.featured_image] : [],
      },
    };
  } catch (error) {
    console.error('Error generating metadata:', error);
    return {
      title: 'Guest Post Marketplace',
      description: 'Get high-quality guest posts on authoritative websites.',
    };
  }
}

// Main Server Component - just fetches data from API
async function getWebsiteData(slug: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
    const response = await fetch(`${baseUrl}/api/frontend/websites/${slug}`, {
      next: { revalidate: 300 }, // Cache for 5 minutes
    });
    
    const result = await response.json();

    if (!result.success) {
      return null;
    }

    return {
      website: result.data,
      relatedWebsites: result.related || [],
    };
  } catch (error) {
    console.error('Error fetching website:', error);
    return null;
  }
}

export default async function WebsiteDetailPage({ params }: { params: { slug: string } }) {
  const { slug } = await params;
  const data = await getWebsiteData(slug);

  if (!data) {
    notFound();
  }

  return <WebsiteDetailClient initialData={data} slug={slug} />;
}