import { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { blogPosts, BlogPost } from '@/data';

export const metadata: Metadata = {
  title: 'Blog | Katheryn Trenshaw',
  description: 'Thoughts, reflections, and creative insights from Katheryn Trenshaw - art, presence, and passionate living.',
};

function formatDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-GB', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  });
}

function BlogPostCard({ post }: { post: BlogPost }) {
  return (
    <article className="group">
      <Link href={`/blog/${post.slug}`} className="block">
        {post.featuredImage && (
          <div className="relative aspect-[16/9] mb-4 overflow-hidden bg-gray-100">
            <Image
              src={post.featuredImage}
              alt={post.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
            />
          </div>
        )}
        <time className="text-xs uppercase tracking-wider text-gray-500">
          {formatDate(post.postDate)}
        </time>
        <h2 className="mt-2 font-serif text-xl text-[#222] group-hover:text-gray-600 transition-colors">
          {post.title}
        </h2>
        <p className="mt-2 text-gray-600 text-sm line-clamp-3">
          {post.excerpt}
        </p>
        <span className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 group-hover:no-underline">
          Read More
        </span>
      </Link>
    </article>
  );
}

export default function BlogPage() {
  // Group posts by year
  const postsByYear = blogPosts.reduce((acc, post) => {
    const year = new Date(post.postDate).getFullYear();
    if (!acc[year]) acc[year] = [];
    acc[year].push(post);
    return acc;
  }, {} as Record<number, BlogPost[]>);

  const years = Object.keys(postsByYear)
    .map(Number)
    .sort((a, b) => b - a);

  return (
    <div className="min-h-screen bg-white pt-24">
      {/* Header */}
      <div className="border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">REFLECTIONS</p>
          <h1 className="font-serif text-4xl md:text-5xl text-[#222]">Blog</h1>
          <p className="mt-4 text-gray-600 max-w-2xl mx-auto">
            Thoughts, reflections, and creative insights on art, presence, and passionate living.
          </p>
        </div>
      </div>

      {/* Recent Posts - Featured Grid */}
      <section className="mx-auto max-w-7xl px-4 py-16">
        <h2 className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-8">Recent Posts</h2>
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {blogPosts.slice(0, 6).map((post) => (
            <BlogPostCard key={post.id} post={post} />
          ))}
        </div>
      </section>

      {/* All Posts by Year */}
      {years.map((year) => (
        <section key={year} className="mx-auto max-w-7xl px-4 py-12 border-t border-gray-100">
          <h2 className="font-serif text-2xl text-[#222] mb-8">{year}</h2>
          <div className="space-y-6">
            {postsByYear[year].map((post) => (
              <article key={post.id} className="group flex gap-6">
                <time className="text-sm text-gray-500 w-24 flex-shrink-0 pt-1">
                  {formatDate(post.postDate)}
                </time>
                <div>
                  <Link href={`/blog/${post.slug}`}>
                    <h3 className="font-serif text-lg text-[#222] group-hover:text-gray-600 transition-colors">
                      {post.title}
                    </h3>
                  </Link>
                  <p className="mt-1 text-gray-600 text-sm line-clamp-2">
                    {post.excerpt}
                  </p>
                </div>
              </article>
            ))}
          </div>
        </section>
      ))}

      {/* Footer CTA */}
      <section className="bg-gray-50 py-16">
        <div className="mx-auto max-w-2xl px-4 text-center">
          <h2 className="font-serif text-2xl text-[#222]">Stay Connected</h2>
          <p className="mt-4 text-gray-600">
            Subscribe to receive updates on new artwork, blog posts, and creative offerings.
          </p>
          <Link
            href="/contact"
            className="mt-6 inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
          >
            Get in Touch
          </Link>
        </div>
      </section>
    </div>
  );
}
