import React from 'react'
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { SectionsLayout } from '@/components/ui/layouts'
import BlogDetailsHero from './components/BlogDetailsHero'
import Blog, { IBlogDetails } from '@/models/Blog'
import BlogDetailsgContent from './components/BlogDetailsgContent'
import { getLocale } from 'next-intl/server'
import { EmailCTASection } from '@/components/sections'
import BlogCTA from './components/LandingCTA'

type Params = Promise<{ slug: string }>

export const generateMetadata = async (props: { params: Params }): Promise<Metadata> => {
    const locale = await getLocale()
    const params = await props.params
    
    try {
        const BlogDetails: IBlogDetails = (await Blog.getDetails(params.slug, locale)) as IBlogDetails
        
        // If blog doesn't exist, return 404 metadata
        if (!BlogDetails) {
            return {
                title: locale === 'en' 
                    ? 'Article Not Found | Dadycar Blog' 
                    : 'Article Introuvable | Blog Dadycar',
                description: locale === 'en'
                    ? 'The requested blog article could not be found. Browse our latest articles on fleet management.'
                    : 'L\'article de blog demandé est introuvable. Parcourez nos derniers articles sur la gestion de flotte.',
                robots: {
                    index: false, // Don't index 404 pages
                    follow: true,  // But follow links on the page
                }
            }
        }
        
        const canonicalUrl = `${process.env.NEXT_PUBLIC_FRONTEND_HOST}${locale === 'fr' ? '' : `/${locale}`}/blog/${BlogDetails.slug}`

        return {
            title: BlogDetails.seo_title || BlogDetails.title,
            description: BlogDetails.meta_desc || BlogDetails.short_description,
            keywords: BlogDetails.slug || BlogDetails.tag,
            openGraph: {
                title: BlogDetails.seo_title || BlogDetails.title,
                description: BlogDetails.meta_desc || BlogDetails.short_description,
                images: [{
                    url: BlogDetails.image_thumbnail,
                    width: 800,
                    height: 600,
                    alt: BlogDetails.title,
                }],
                type: 'article',
                url: canonicalUrl,
            },
            twitter: {
                card: 'summary_large_image',
                title: BlogDetails.seo_title || BlogDetails.title,
                description: BlogDetails.meta_desc || BlogDetails.short_description,
                images: [BlogDetails.image_thumbnail],
            },
            alternates: {
                canonical: canonicalUrl,
            },
            robots: {
                index: true,
                follow: true,
            }
        }
    } catch (error) {
        // If API call fails, return 404 metadata
        console.error('Error fetching blog details:', error)
        return {
            title: locale === 'en' 
                ? 'Article Not Found | Dadycar Blog' 
                : 'Article Introuvable | Blog Dadycar',
            description: locale === 'en'
                ? 'The requested blog article could not be found. Browse our latest articles on fleet management.'
                : 'L\'article de blog demandé est introuvable. Parcourez nos derniers articles sur la gestion de flotte.',
            robots: {
                index: false,
                follow: true,
            }
        }
    }
}

const BlogDetailsPage = async (props: { params: Params }) => {
    const locale = await getLocale()
    const params = await props.params
    
    try {
        const BlogDetails: IBlogDetails = (await Blog.getDetails(params.slug, locale)) as IBlogDetails
        
        // If blog doesn't exist, trigger 404 page (SEO improvement)
        if (!BlogDetails) {
            notFound()
        }
        
        return (
            <main className='bg-white'>
                <BlogDetailsHero BlogDetails={BlogDetails} />
                <SectionsLayout className='xl:!max-w-[1400px]'>
                    <BlogDetailsgContent BlogDetails={BlogDetails} />
                </SectionsLayout>
                <div className='bg-[#F5F7F9] space-y-40 mt-40'>
                    <BlogCTA />
                    <EmailCTASection />
                </div>
            </main>
        )
    } catch (error) {
        // If API call fails or returns error, trigger 404
        console.error('Error loading blog details:', error)
        notFound()
    }
}

export default BlogDetailsPage