import type { Metadata } from 'next';
import BlogPostContent from './BlogPostContent';

// Force dynamic rendering to ensure generateMetadata runs on every request
export const dynamic = 'force-dynamic';

// Server-side metadata generation for Facebook and other crawlers
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 
    (process.env.NODE_ENV === 'production' ? 'https://api.sseoa.af/api/v1' : 'http://localhost:8000/api/v1');
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://sseoa.af';
  
  const { slug } = await params;
  
  if (!slug) {
    console.error('Slug is missing from params:', { slug });
    return {
      title: 'Blog Post | SSEOA',
      description: 'Read our latest blog post',
      openGraph: {
        title: 'Blog Post | SSEOA',
        description: 'Read our latest blog post',
        type: 'article',
        url: `${siteUrl}/blog`,
        images: [`${siteUrl}/logo/logo-png.png`],
        siteName: 'SSEOA',
      },
    };
  }
  
  try {
    // Ensure we have a valid API URL
    const finalApiUrl = API_BASE_URL || 'https://api.sseoa.af/api/v1';
    const apiUrl = `${finalApiUrl}/blog-posts/${slug}?include=author`;
    
    console.log('Fetching metadata for blog post:', { apiUrl, slug, API_BASE_URL, NODE_ENV: process.env.NODE_ENV });
    
    // Add timeout to prevent hanging
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
    
    const response = await fetch(apiUrl, {
      cache: 'no-store', // Always fetch fresh data for metadata
      signal: controller.signal,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });
    
    clearTimeout(timeoutId);

    if (!response.ok) {
      console.error(`Failed to fetch blog post: ${response.status} ${response.statusText}`, { apiUrl, slug });
      return {
        title: 'Blog Post | SSEOA',
        description: 'Read our latest blog post',
        openGraph: {
          title: 'Blog Post | SSEOA',
          description: 'Read our latest blog post',
          type: 'article',
          url: `${siteUrl}/blog/${slug}`,
          images: [`${siteUrl}/logo/logo-png.png`],
          siteName: 'SSEOA',
        },
      };
    }

    const responseData = await response.json();
    
    // Handle Laravel API response structure: { success: true, data: {...}, message: "..." }
    let post = null;
    if (responseData && typeof responseData === 'object') {
      if ('success' in responseData && 'data' in responseData) {
        post = responseData.data;
      } else if ('data' in responseData) {
        post = responseData.data;
      } else {
        post = responseData;
      }
    }

    if (!post || !post.title) {
      console.error('Blog post data is invalid or missing:', { responseData, post, slug });
      return {
        title: 'Blog Post | SSEOA',
        description: 'Read our latest blog post',
        openGraph: {
          title: 'Blog Post | SSEOA',
          description: 'Read our latest blog post',
          type: 'article',
          url: `${siteUrl}/blog/${slug}`,
          images: [`${siteUrl}/logo/logo-png.png`],
          siteName: 'SSEOA',
        },
      };
    }

    const title = post.meta_title || post.title || 'Blog Post';
    const description = post.meta_description || post.excerpt || post.title || 'Read our latest blog post';
    const imageUrl = post.featured_image || post.thumbnail || null;
    const url = `${siteUrl}/blog/${slug}`;
    
    console.log('Blog post data retrieved:', { title, description, imageUrl, url, slug });

    // Ensure image URL is absolute - API returns full URLs via asset() helper
    let ogImage: string | null = null;
    if (imageUrl) {
      if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
        // Already absolute URL from API
        ogImage = imageUrl;
      } else if (imageUrl.startsWith('/storage/') || imageUrl.startsWith('/images/')) {
        // Relative URL from API - construct absolute URL
        const apiUrl = new URL(API_BASE_URL);
        ogImage = `${apiUrl.origin}${imageUrl}`;
      } else {
        // Relative URL from site
        ogImage = `${siteUrl}${imageUrl}`;
      }
    }

    // If no image, use default logo
    if (!ogImage) {
      ogImage = `${siteUrl}/logo/logo-png.png`;
    }

    // Construct complete metadata object matching Save the Children's structure
    const metadata: Metadata = {
      title: `${title} | SSEOA`,
      description: description,
      keywords: post.tags?.join(', ') || 'SSEOA, Afghanistan, nonprofit, charity, community development',
      openGraph: {
        title: title,
        description: description,
        type: 'article', // Using 'article' instead of 'news' as it's more standard for blog posts
        url: url,
        siteName: 'SSEOA',
        locale: 'en',
        images: [
          {
            url: ogImage,
            width: 1200,
            height: 630,
            alt: title,
            type: 'image/jpeg',
          }
        ],
      },
      twitter: {
        card: 'summary_large_image',
        title: `${title} | SSEOA`,
        description: description,
        images: [ogImage],
      },
      alternates: {
        canonical: url,
      },
      // Additional meta tags that Save the Children uses
      // Note: Next.js will automatically generate og:image:width and og:image:height from the images array
      other: {
        'abstract': description,
        'og:image:url': ogImage,
        // Add fb:app_id if you have a Facebook App ID (optional but recommended by Facebook)
        // 'fb:app_id': process.env.NEXT_PUBLIC_FB_APP_ID || '',
      },
    };

    // Log for debugging (only in development)
    if (process.env.NODE_ENV === 'development') {
      console.log('Generated metadata:', {
        title,
        description,
        ogImage,
        url,
      });
    }

    return metadata;
  } catch (error: any) {
    console.error('Error generating metadata for blog post:', {
      error: error?.message || error,
      name: error?.name,
      slug,
      API_BASE_URL,
      stack: error?.stack,
    });
    
    // Even on error, try to return metadata with the slug at least
    return {
      title: 'Blog Post | SSEOA',
      description: 'Read our latest blog post',
      openGraph: {
        title: 'Blog Post | SSEOA',
        description: 'Read our latest blog post',
        type: 'article',
        url: slug ? `${siteUrl}/blog/${slug}` : `${siteUrl}/blog`,
        images: [`${siteUrl}/logo/logo-png.png`],
        siteName: 'SSEOA',
      },
    };
  }
}

export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  
  if (!slug) {
    console.error('Slug is missing in BlogPostPage');
  }
  
  return <BlogPostContent slug={slug} />;
}