import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  findTagBySlug,
  getAllTags,
  getPostsByTag,
  tagSlug,
} from "@/lib/blog";
import { breadcrumbLd, buildMetadata } from "@/lib/seo";
import { formatDate } from "@/lib/utils";

export const dynamicParams = false;

export function generateStaticParams() {
  return getAllTags().map((t) => ({ tag: tagSlug(t.tag) }));
}

type Params = { params: Promise<{ tag: string }> };

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { tag } = await params;
  const real = findTagBySlug(tag);
  if (!real) return { title: "Tag not found" };
  return buildMetadata({
    title: `${real} — Markdown articles & guides`,
    description: `All Markdown Viewer articles tagged "${real}". Tutorials, reference guides, and tips.`,
    path: `/blog/tag/${tag}`,
  });
}

export default async function TagPage({ params }: Params) {
  const { tag } = await params;
  const real = findTagBySlug(tag);
  if (!real) notFound();
  const posts = getPostsByTag(real);

  return (
    <section className="container py-12 sm:py-16">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: breadcrumbLd([
            { name: "Home", url: "/" },
            { name: "Blog", url: "/blog" },
            { name: real, url: `/blog/tag/${tag}` },
          ]),
        }}
      />

      <nav
        aria-label="Breadcrumb"
        className="flex items-center gap-1 text-xs text-muted-foreground"
      >
        <Link href="/" className="hover:text-foreground">
          Home
        </Link>
        <span aria-hidden>/</span>
        <Link href="/blog" className="hover:text-foreground">
          Blog
        </Link>
        <span aria-hidden>/</span>
        <span className="text-foreground">{real}</span>
      </nav>

      <header className="mt-6 max-w-2xl">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">Tag</p>
        <h1 className="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
          Articles tagged <span className="text-primary">{real}</span>
        </h1>
        <p className="mt-3 text-pretty text-muted-foreground">
          {posts.length} {posts.length === 1 ? "article" : "articles"} on {real}.
        </p>
      </header>

      <ul className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`} className="group block h-full">
              <Card className="h-full transition-shadow hover:shadow-md">
                <CardHeader>
                  <div className="text-[11px] uppercase tracking-wider text-muted-foreground">
                    {formatDate(post.date)} · {post.readingTime} min
                  </div>
                  <CardTitle className="mt-1 text-lg group-hover:text-primary">
                    {post.title}
                  </CardTitle>
                  <CardDescription className="line-clamp-3">{post.description}</CardDescription>
                </CardHeader>
                <CardContent className="flex flex-wrap items-center gap-1.5">
                  {post.tags.slice(0, 3).map((t) => (
                    <Badge key={t} variant="secondary" className="text-[10px]">
                      {t}
                    </Badge>
                  ))}
                </CardContent>
              </Card>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}