import React from 'react'
import Link from 'next/link'
import { getLocale } from 'next-intl/server'
import { H1, P } from '@/components/ui/typography'
import { Button } from '@/components/ui/buttons/Button'
import Blog, { IBlogList } from '@/models/Blog'

export default async function BlogNotFound() {
  const locale = await getLocale()

  // Get 5 latest blog posts to suggest
  let suggestedPosts: IBlogList['blogs'] = []
  try {
    const blogList = await Blog.getList(locale, 1, 5) as IBlogList
    suggestedPosts = blogList?.blogs || []
  } catch (error) {
    console.error('Error fetching suggested posts:', error)
  }

  const blogPath = locale === 'en' ? '/en/blog' : '/blog'

  return (
    <div className="min-h-screen flex items-center justify-center px-4 bg-white">
      <div className="max-w-2xl w-full text-center">
        {/* 404 Heading */}
        <div className="mb-8">
          <H1 className="!text-[72px] !font-[700] text-[#52A5EF] mb-4">404</H1>
          <H1 className="!text-[32px] !font-[600] text-[#27272A] mb-4">
            {locale === 'en' ? 'Article Not Found' : 'Article Introuvable'}
          </H1>
          <P className="!text-[18px] text-[#71717A]">
            {locale === 'en' 
              ? "We couldn't find the blog article you're looking for. It may have been moved, deleted, or doesn't exist."
              : "Nous n'avons pas trouvé l'article de blog que vous recherchez. Il a peut-être été déplacé, supprimé ou n'existe pas."
            }
          </P>
        </div>

        {/* Action Buttons */}
        <div className="mb-8 p-6 bg-[#F5F7F9] rounded-[16px]">
          <P className="!text-[16px] !font-[500] text-[#27272A] mb-4">
            {locale === 'en' 
              ? 'Explore our latest articles on fleet management:'
              : 'Explorez nos derniers articles sur la gestion de flotte :'
            }
          </P>
          <Link href={blogPath}>
            <Button link={blogPath} className="!px-[24px] !py-[12px]">
              {locale === 'en' ? 'Browse All Articles' : 'Parcourir Tous les Articles'}
            </Button>
          </Link>
        </div>

        {/* Suggested Posts */}
        {suggestedPosts.length > 0 && (
          <div className="mb-8">
            <P className="!text-[18px] !font-[600] text-[#27272A] mb-6">
              {locale === 'en' ? 'Latest Articles:' : 'Derniers Articles :'}
            </P>
            <div className="space-y-4">
              {suggestedPosts.map((post) => (
                <Link 
                  key={post.id}
                  href={`${blogPath}/${post.slug}`}
                  className="block p-4 bg-white border-[1px] border-[#E2E8F0] rounded-[12px] hover:border-[#52A5EF] hover:shadow-md transition-all text-left"
                >
                  <div className="flex gap-4">
                    {post.image_thumbnail && (
                      <div className="w-24 h-24 flex-shrink-0">
                        <img 
                          src={post.image_thumbnail} 
                          alt={post.title}
                          className="w-full h-full object-cover rounded-[8px]"
                        />
                      </div>
                    )}
                    <div className="flex-1">
                      <P className="!text-[16px] !font-[600] text-[#27272A] mb-2">
                        {post.title}
                      </P>
                      {post.short_description && (
                        <P className="!text-[14px] text-[#71717A] line-clamp-2">
                          {post.short_description}
                        </P>
                      )}
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        )}

        {/* Additional Help */}
        <div className="border-t border-[#E2E8F0] pt-6">
          <P className="!text-[14px] text-[#71717A]">
            {locale === 'en' 
              ? 'Need help? '
              : 'Besoin d\'aide ? '
            }
            <Link href={locale === 'en' ? '/en/contact' : '/contact'} className="text-[#52A5EF] hover:underline">
              {locale === 'en' ? 'Contact us' : 'Contactez-nous'}
            </Link>
          </P>
        </div>
      </div>
    </div>
  )
}