import { Metadata } from 'next'
import Link from 'next/link'
import { getAllPosts } from '@/lib/markdown'
import { formatDate } from '@/lib/utils'

export const metadata: Metadata = {
  title: 'Blog',
  description: 'Toate articolele din blog',
}

function PostCard({ post }: { post: any }) {
  return (
    <article className="border-b border-gray-200 dark:border-gray-700 pb-8 mb-8 last:border-0">
      <div className="flex flex-col lg:flex-row gap-6">
        {post.frontmatter.image && (
          <div className="lg:w-1/3">
            <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 lg:h-full object-cover rounded-lg" />
          </div>
        )}
        <div className={post.frontmatter.image ? 'lg:w-2/3' : 'w-full'}>
          <div className="flex items-center gap-4 text-sm text-gray-500 mb-2">
            <time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
            <span>•</span>
            <span>{post.readingTime} min citire</span>
            <span>•</span>
            <span>{post.frontmatter.author}</span>
          </div>
          <h2 className="text-2xl font-bold mb-3">
            <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
              {post.frontmatter.title}
            </Link>
          </h2>
          <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
          {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
            <div className="flex flex-wrap gap-2 mb-4">
              {post.frontmatter.tags.map((tag: string) => (
                <span key={tag} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-sm rounded-full">
                  #{tag}
                </span>
              ))}
            </div>
          )}
          <Link href={`/blog/${post.slug}`} className="inline-flex items-center text-primary-600 hover:text-primary-700 transition">
            Citește articolul complet
            <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </Link>
        </div>
      </div>
    </article>
  )
}

function BlogFilters({ totalPosts }: { totalPosts: number }) {
  return (
    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold mb-2">Articole Blog</h1>
          <p className="text-gray-600 dark:text-gray-400">
            {totalPosts} {totalPosts === 1 ? 'articol' : 'articole'} publicate
          </p>
        </div>
      </div>
    </div>
  )
}

export default async function BlogPage() {
  const posts = await getAllPosts()

  if (posts.length === 0) {
    return (
      <div className="text-center py-12">
        <h1 className="text-3xl font-bold mb-4">Blog</h1>
        <p className="text-gray-600 dark:text-gray-400 mb-8">Nu există articole publicate încă.</p>
        <Link href="/" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
          Înapoi la pagina principală
        </Link>
      </div>
    )
  }

  return (
    <div className="max-w-4xl mx-auto">
      <BlogFilters totalPosts={posts.length} />
      <div>
        {posts.map((post) => (
          <PostCard key={post.slug} post={post} />
        ))}
      </div>
    </div>
  )
}