/**
 * Blog Listing Page
 */

import { type Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import Link from 'next/link';
import { Footer } from '@/components/layout/Footer';
import { Card } from '@shinecode/ui';
import { ImageWithFallback } from '@/components/ui/ImageWithFallback';
import { getBlogs } from '@/lib/api/client';
import { type Locale } from '@/i18n';

interface BlogPageProps {
  params: Promise<{ locale: Locale }>;
}

export async function generateMetadata({ params }: BlogPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'blog' });

  return {
    title: t('metaTitle'),
    description: t('metaDescription'),
    alternates: {
      canonical: `https://shinecode.ae/${locale}/blog`,
      languages: {
        en: `https://shinecode.ae/en/blog`,
        ar: `https://shinecode.ae/ar/blog`,
        'x-default': `https://shinecode.ae/en/blog`,
      },
    },
    openGraph: {
      title: t('metaTitle'),
      description: t('metaDescription'),
      url: `https://shinecode.ae/${locale}/blog`,
      siteName: 'ShineCode',
      images: ['https://shinecode.ae/images/frontend/socialP.webp'],
      locale: locale === 'ar' ? 'ar_AE' : 'en_AE',
    },
  };
}

export default async function BlogPage({ params }: BlogPageProps) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'blog' });
  
  const blogsResult = await getBlogs();
  const blogs = blogsResult.ok ? blogsResult.data : [];

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <main id="main-content" className="flex-1">
        <section className="py-16 md:py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto">
              <h1 className="text-4xl md:text-5xl font-bold text-ink mb-4">{t('title')}</h1>
              <p className="text-lg text-muted mb-12">{t('subtitle')}</p>

              {blogs.length === 0 ? (
                <div className="text-center py-16">
                  <p className="text-lg text-muted">{t('noPosts')}</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                  {blogs.map((blog) => {
                    const blogImage = blog.featured_image || (Array.isArray(blog.attchments) && blog.attchments.length > 0 ? blog.attchments[0] : null);
                    const excerpt = blog.excerpt || (blog.description ? blog.description.replace(/<[^>]*>?/gm, '').slice(0, 150) : null);
                    const slug = blog.slug || String(blog.id);

                    return (
                      <Link key={blog.id} href={`/${locale}/blog/${slug}`}>
                        <Card hover className="h-full">
                          {blogImage && (
                            <div className="aspect-[16/9] overflow-hidden relative">
                              <ImageWithFallback
                                src={blogImage}
                                fallbackSrc="/images/fallback-placeholder.svg"
                                alt={blog.title}
                                fill
                                className="object-cover"
                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                              />
                            </div>
                          )}
                          <div className="p-6">
                            <h2 className="text-xl font-semibold text-ink mb-2 line-clamp-2">
                              {blog.title}
                            </h2>
                            {excerpt && (
                              <p className="text-muted line-clamp-3 mb-4">{excerpt}</p>
                            )}
                            <span className="text-brand-600 text-sm font-medium">
                              {t('readMore')} →
                            </span>
                          </div>
                        </Card>
                      </Link>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </section>
      </main>
      <Footer locale={locale} />
    </div>
  );
}