import type { Metadata } from "next";
import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { ToolsExplorer } from "@/app/tools/ToolsExplorer";
import { ToolCard } from "@/components/tools/ToolCard";
import {
  categoryDescriptions,
  categoryLabels,
  categoryPluralLabels,
  getFeaturedTools,
  toolRegistry,
  type ToolCategory,
} from "@/tools/registry";

const BASE = (process.env.NEXT_PUBLIC_SITE_URL ?? "https://toolaro.org").replace(/\/$/, "");

export const metadata: Metadata = {
  title: "Kostenlose Online-Tools - alle Toolaro Webtools",
  description:
    "Alle kostenlosen Toolaro Webtools: QR-Code Generator, Passwort-Generator, Prozentrechner, Wortzähler, Base64 Encoder, Timestamp Converter, JSON Formatter, BMI Rechner und mehr.",
  alternates: { canonical: "/tools" },
  openGraph: {
    title: "Kostenlose Online-Tools - Toolaro",
    description:
      "Schnelle Webtools für Alltag, Text, Sicherheit, Rechner und Entwickler-Aufgaben. Direkt im Browser nutzbar.",
    url: `${BASE}/tools`,
    type: "website",
  },
};

const categoryLinks: Array<{ category: ToolCategory; href: string }> = [
  { category: "text", href: "/tools/text" },
  { category: "developer", href: "/tools/developer" },
  { category: "calculator", href: "/tools/calculator" },
  { category: "security", href: "/tools/security" },
  { category: "converter", href: "/tools/converter" },
];

export default async function ToolsPage({
  searchParams,
}: {
  searchParams: Promise<{ search?: string; category?: ToolCategory }>;
}) {
  const params = await searchParams;
  const featured = getFeaturedTools().slice(0, 6);
  const itemList = {
    "@context": "https://schema.org",
    "@type": "ItemList",
    name: "Toolaro Online-Tools",
    itemListElement: toolRegistry.map((tool, index) => ({
      "@type": "ListItem",
      position: index + 1,
      url: `${BASE}/tools/${tool.slug}`,
      name: tool.name,
      description: tool.description,
    })),
  };

  return (
    <div className="mx-auto max-w-7xl px-4 py-10 sm:py-12">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(itemList) }} />

      {/* Hero */}
      <section className="grid gap-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-end">
        <div>
          <p
            className="mb-3 text-[0.7rem] font-bold uppercase tracking-[0.2em] text-brand-500"
            style={{ fontFamily: '"Courier New", monospace' }}
          >
            Toolaro · Werkkatalog
          </p>
          <h1 className="max-w-4xl font-display text-4xl font-bold uppercase leading-tight tracking-tight text-ink-primary sm:text-5xl">
            Kostenlose Tools, sauber sortiert.
          </h1>
          <p className="mt-5 max-w-3xl text-base leading-8 text-ink-secondary">
            Rechner, Generatoren, Converter, Text- und Developer-Tools ohne Anmeldung. Viele
            Funktionen laufen lokal im Browser, Premium ergänzt Komfort wie Favoriten, Verlauf,
            Exporte und werbefreie Nutzung.
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <Link
              href="#tool-finder"
              className="inline-flex items-center gap-2 border-2 border-ink-primary bg-brand-500 px-5 py-2.5 text-[0.8rem] font-bold uppercase tracking-[0.06em] text-surface-base shadow-[4px_4px_0_rgb(var(--ink-primary))] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[0_0_0_rgb(var(--ink-primary))]"
            >
              Tool finden
            </Link>
            <Link
              href="/pricing"
              className="inline-flex items-center gap-2 border-2 border-ink-primary bg-surface-raised px-5 py-2.5 text-[0.8rem] font-bold uppercase tracking-[0.06em] text-ink-primary shadow-[4px_4px_0_rgb(var(--ink-primary))] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[0_0_0_rgb(var(--ink-primary))]"
            >
              Premium ansehen
            </Link>
          </div>
        </div>

        <div className="grid gap-3 sm:grid-cols-2">
          <Stat label="Tools" value={toolRegistry.length.toString()} />
          <Stat label="Ohne Login" value="Basis" />
          <Stat label="Kategorien" value={categoryLinks.length.toString()} />
          <Stat label="Lokal nutzbar" value="Viele" />
        </div>
      </section>

      {/* Category grid */}
      <section className="mt-10 grid gap-3 md:grid-cols-5">
        {categoryLinks.map(({ category, href }) => {
          const count = toolRegistry.filter((tool) => tool.category === category).length;
          return (
            <Link
              key={category}
              href={href}
              className="group border-2 border-ink-primary bg-surface-raised p-4 shadow-[4px_4px_0_rgb(var(--brand-500))] transition-[transform,box-shadow] duration-[120ms] [transition-timing-function:steps(2)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[0_0_0_rgb(var(--brand-500))]"
            >
              <div className="flex items-center justify-between gap-2">
                <h2 className="font-display font-bold uppercase tracking-tight text-ink-primary">
                  {categoryLabels[category]}
                </h2>
                <ArrowRight className="h-4 w-4 shrink-0 text-ink-tertiary transition-transform group-hover:translate-x-0.5 group-hover:text-brand-500" />
              </div>
              <p
                className="mt-2 text-[0.65rem] font-bold uppercase tracking-[0.16em] text-brand-500"
                style={{ fontFamily: '"Courier New", monospace' }}
              >
                {count} Tools
              </p>
              <p className="mt-2 line-clamp-3 text-sm leading-6 text-ink-secondary">
                {categoryDescriptions[category]}
              </p>
            </Link>
          );
        })}
      </section>

      {/* Featured tools */}
      {!!featured.length && (
        <section className="mt-12">
          <div className="mb-5 flex flex-wrap items-end justify-between gap-3">
            <div>
              <p
                className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
                style={{ fontFamily: '"Courier New", monospace' }}
              >
                Empfohlen
              </p>
              <h2 className="font-display text-2xl font-bold uppercase tracking-tight text-ink-primary">
                Beliebte Tools
              </h2>
            </div>
            <Link
              href="#tool-finder"
              className="text-[0.75rem] font-bold uppercase tracking-[0.12em] text-brand-500 underline underline-offset-4 hover:text-brand-600"
              style={{ fontFamily: '"Courier New", monospace' }}
            >
              Alle Tools durchsuchen
            </Link>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {featured.map((tool) => (
              <ToolCard key={tool.slug} tool={tool} compact />
            ))}
          </div>
        </section>
      )}

      {/* Tool finder */}
      <div id="tool-finder" className="mt-12 scroll-mt-24">
        <ToolsExplorer initialSearch={params.search ?? ""} initialCategory={params.category ?? "all"} />
      </div>

      {/* SEO category blocks */}
      <section className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {Object.entries(categoryLabels).map(([key, label]) => {
          const typed = key as ToolCategory;
          const count = toolRegistry.filter((tool) => tool.category === typed).length;
          if (!count) return null;
          return (
            <article key={key} className="border-2 border-ink-primary bg-surface-sunken p-5">
              <h2 className="font-display font-bold uppercase tracking-tight text-ink-primary">
                {label} online nutzen
              </h2>
              <p className="mt-2 text-sm leading-6 text-ink-secondary">
                {count} {categoryPluralLabels[typed]}: {categoryDescriptions[typed]}
              </p>
            </article>
          );
        })}
      </section>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="border-2 border-ink-primary bg-surface-raised p-4 shadow-[4px_4px_0_rgb(var(--ink-primary))]">
      <p className="font-display text-2xl font-bold leading-none text-ink-primary">{value}</p>
      <p
        className="mt-2 text-[0.65rem] font-bold uppercase tracking-[0.16em] text-ink-tertiary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        {label}
      </p>
    </div>
  );
}