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

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

export const metadata: Metadata = buildMetadata({
  title: "Markdown Blog — Tutorials, Guides, and Tips",
  description:
    "In-depth Markdown tutorials and guides — syntax, tables, images, links, code blocks, GitHub READMEs, Discord formatting, Markdown to PDF, and more.",
  path: "/blog",
  keywords: [
    "markdown blog",
    "markdown tutorial",
    "markdown guide",
    "markdown tips",
    "markdown examples",
  ],
});

export default function BlogIndexPage() {
  const posts = getAllPosts();
  const tags = getAllTags().slice(0, 12);
  const [featured, ...rest] = posts;

  return (
    <section className="container py-12 sm:py-16">
      <header className="mb-10 max-w-2xl">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">Blog</p>
        <h1 className="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
          Markdown tutorials, tips, and tools
        </h1>
        <p className="mt-3 text-pretty text-muted-foreground sm:text-lg">
          In-depth guides on writing, editing, and shipping Markdown — for developers, writers,
          and documentation teams. Updated weekly.
        </p>
      </header>

      {tags.length > 0 ? (
        <div className="mb-10">
          <h2 className="sr-only">Browse by topic</h2>
          <div className="flex flex-wrap gap-2">
            {tags.map(({ tag, count }) => (
              <Link key={tag} href={`/blog/tag/${tagSlug(tag)}`}>
                <Badge
                  variant="outline"
                  className="cursor-pointer text-xs transition-colors hover:bg-secondary"
                >
                  {tag}
                  <span className="ml-1.5 text-muted-foreground">{count}</span>
                </Badge>
              </Link>
            ))}
          </div>
        </div>
      ) : null}

      {featured ? (
        <Link href={`/blog/${featured.slug}`} className="group mb-10 block">
          <Card className="overflow-hidden transition-shadow hover:shadow-lg">
            <div className="grid gap-0 lg:grid-cols-[1fr_2fr]">
              <div
                aria-hidden
                className="hidden bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-12 lg:block"
              >
                <span className="text-xs font-medium uppercase tracking-wider text-primary">
                  Featured
                </span>
                <p className="mt-3 text-5xl font-semibold tabular-nums text-primary/30">
                  {String(posts.indexOf(featured) + 1).padStart(2, "0")}
                </p>
              </div>
              <CardHeader className="p-6 sm:p-8">
                <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                  <time dateTime={featured.date}>{formatDate(featured.date)}</time>
                  <span aria-hidden>·</span>
                  <span>{featured.readingTime} min read</span>
                  {featured.tags.slice(0, 2).map((tag) => (
                    <Badge key={tag} variant="secondary" className="text-[10px]">
                      {tag}
                    </Badge>
                  ))}
                </div>
                <CardTitle className="mt-3 text-2xl group-hover:text-primary sm:text-3xl">
                  {featured.title}
                </CardTitle>
                <CardDescription className="text-base">{featured.description}</CardDescription>
                <span className="mt-4 text-sm font-medium text-primary">Read article →</span>
              </CardHeader>
            </div>
          </Card>
        </Link>
      ) : null}

      <h2 className="mb-4 text-lg font-semibold tracking-tight">More articles</h2>
      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {rest.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((tag) => (
                    <Badge key={tag} variant="secondary" className="text-[10px]">
                      {tag}
                    </Badge>
                  ))}
                </CardContent>
              </Card>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}