import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { ArrowRight, Calendar } from "lucide-react";
import { SectionTitle } from "@/components/section-title";
import { listPublishedPosts } from "@/lib/data";
import { buildMetadata } from "@/lib/seo";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata("/blog", {
    title: "Blog",
    description: "Yazılım, web tasarım, SEO ve dijital pazarlama üzerine yazılar.",
  });
}

export default async function BlogIndex() {
  const posts = await listPublishedPosts();

  return (
    <div className="mx-auto max-w-7xl px-6 py-20">
      <SectionTitle
        eyebrow="Blog"
        title="Yazılım, tasarım ve büyüme üzerine"
        description="Sektörden notlar, vaka çalışmaları ve teknik rehberler."
      />

      <div className="mt-14">
        {posts.length === 0 ? (
          <div className="rounded-2xl border border-dashed border-[var(--border)] bg-[var(--navy-50)]/40 p-12 text-center">
            <p className="text-sm text-[var(--muted)]">
              Henüz yayınlanmış yazı yok.
            </p>
          </div>
        ) : (
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {posts.map((p) => (
              <article
                key={p.$id}
                className="group overflow-hidden rounded-2xl border border-[var(--border)] bg-white transition hover:shadow-lg"
              >
                <Link href={`/blog/${p.slug}`}>
                  <div className="relative aspect-video overflow-hidden bg-[var(--navy-50)]">
                    {p.cover_image ? (
                      <Image
                        src={p.cover_image}
                        alt={p.title}
                        fill
                        sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
                        className="object-cover transition group-hover:scale-105"
                      />
                    ) : (
                      <div className="flex h-full items-center justify-center text-3xl font-bold text-[var(--navy)]/30">
                        {p.title.charAt(0)}
                      </div>
                    )}
                  </div>
                  <div className="p-6">
                    <p className="flex items-center gap-1.5 text-xs text-[var(--muted)]">
                      <Calendar className="size-3.5" />
                      {p.published_at
                        ? new Date(p.published_at).toLocaleDateString("tr-TR")
                        : "—"}
                    </p>
                    <h3 className="mt-2 text-lg font-semibold text-[var(--navy)] group-hover:text-[var(--sky-600)]">
                      {p.title}
                    </h3>
                    {p.excerpt && (
                      <p className="mt-2 text-sm leading-relaxed text-[var(--muted)] line-clamp-3">
                        {p.excerpt}
                      </p>
                    )}
                    <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-[var(--sky-600)]">
                      Devamını oku <ArrowRight className="size-3.5" />
                    </span>
                  </div>
                </Link>
              </article>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}