import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { breadcrumbLd, buildMetadata } from "@/lib/seo";
import { TOOL_GROUPS } from "@/lib/tools";

export const metadata: Metadata = buildMetadata({
  title: "Markdown Tools — Editor, Converter, Formatter, Table Generator",
  description:
    "A free suite of online Markdown tools: editor, previewer, viewer, formatter, HTML to Markdown converter, Markdown to PDF, and a visual table generator. No signup, no upload.",
  path: "/tools",
  keywords: [
    "markdown tools",
    "markdown editor",
    "markdown converter",
    "markdown formatter",
    "markdown table generator",
    "markdown to pdf",
    "html to markdown",
  ],
});

export default function ToolsIndexPage() {
  return (
    <div className="container py-12 sm:py-16">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: breadcrumbLd([
            { name: "Home", url: "/" },
            { name: "Tools", url: "/tools" },
          ]),
        }}
      />
      <header className="mx-auto max-w-2xl text-center">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">Tools</p>
        <h1 className="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
          Markdown tools that just work
        </h1>
        <p className="mt-3 text-pretty text-muted-foreground sm:text-lg">
          A free, open-source suite for editing, previewing, converting, and formatting Markdown.
          Everything runs in your browser — no signup, no upload, no watermark.
        </p>
      </header>

      <div className="mt-12 space-y-12">
        {TOOL_GROUPS.map((group) => (
          <section key={group.title}>
            <div className="mb-4 flex items-baseline justify-between gap-4">
              <div>
                <h2 className="text-2xl font-semibold tracking-tight">{group.title}</h2>
                <p className="text-sm text-muted-foreground">{group.subtitle}</p>
              </div>
            </div>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {group.tools.map((tool) => {
                const Icon = tool.icon;
                return (
                  <Link
                    key={tool.slug}
                    href={tool.href}
                    className="group block rounded-xl"
                  >
                    <Card className="h-full transition-shadow hover:shadow-md">
                      <CardHeader>
                        <div className="mb-3 flex items-center justify-between">
                          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                            <Icon className="h-4 w-4" />
                          </div>
                          {tool.tags?.includes("new") ? (
                            <Badge variant="success" className="text-[10px]">
                              New
                            </Badge>
                          ) : tool.tags?.includes("popular") ? (
                            <Badge variant="secondary" className="text-[10px]">
                              Popular
                            </Badge>
                          ) : null}
                        </div>
                        <CardTitle className="text-lg group-hover:text-primary">
                          {tool.title}
                        </CardTitle>
                        <CardDescription>{tool.description}</CardDescription>
                      </CardHeader>
                      <CardContent className="text-sm font-medium text-primary">
                        Open tool <ArrowRight className="inline h-3.5 w-3.5" />
                      </CardContent>
                    </Card>
                  </Link>
                );
              })}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}