import Link from 'next/link';
import { getAllPosts } from '@/lib/blog';
import { getTranslations } from 'next-intl/server';

interface BlogIndexProps {
  params: {
    locale: string;
  };
}

export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
  const t = await getTranslations({ locale, namespace: 'blog' });
  
  return {
    title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
    description: locale === 'de'
      ? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
      : 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.',
  };
}

export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
  const posts = await getAllPosts(locale);
  const t = await getTranslations({ locale, namespace: 'blog' });

  // Get unique categories
  const categories = Array.from(new Set(posts.map(post => post.frontmatter.category).filter(Boolean)));

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold text-primary mb-4">
          {locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions'}
        </h1>
        <p className="text-lg text-text-secondary max-w-3xl mx-auto">
          {locale === 'de'
            ? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
            : 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.'}
        </p>
      </div>

      {/* Category filter - could be made interactive with client component */}
      {categories.length > 0 && (
        <div className="mb-8 flex flex-wrap gap-2 justify-center">
          {categories.map((category) => (
            <span
              key={category}
              className="px-4 py-2 bg-neutral-light text-text-primary rounded-full text-sm font-medium"
            >
              {category}
            </span>
          ))}
        </div>
      )}
      
      {/* Masonry-style grid */}
      <div className="columns-1 md:columns-2 gap-8 space-y-8">
        {posts.map((post) => (
          <Link
            key={post.slug}
            href={`/${locale}/blog/${post.slug}`}
            className="group block break-inside-avoid mb-8"
          >
            <article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark transition-all hover:shadow-md hover:-translate-y-1">
              {post.frontmatter.featuredImage && (
                <div className="relative overflow-hidden">
                  <img
                    src={post.frontmatter.featuredImage}
                    alt={post.frontmatter.title}
                    className="w-full h-auto object-cover transition-transform group-hover:scale-105"
                  />
                  {post.frontmatter.category && (
                    <span className="absolute top-4 left-4 px-3 py-1 bg-primary text-white text-xs font-medium rounded-full">
                      {post.frontmatter.category}
                    </span>
                  )}
                </div>
              )}
              <div className="p-6">
                <div className="text-sm text-text-secondary mb-2">
                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                  })}
                </div>
                <h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors line-clamp-2">
                  {post.frontmatter.title}
                </h2>
                {post.frontmatter.excerpt && (
                  <p className="text-text-secondary line-clamp-3 mb-4">
                    {post.frontmatter.excerpt}
                  </p>
                )}
                <span className="text-primary font-medium group-hover:underline inline-flex items-center">
                  {locale === 'de' ? 'Weiterlesen' : 'Read more'} →
                </span>
              </div>
            </article>
          </Link>
        ))}
      </div>
    </div>
  );
}