import type { Metadata } from "next";
import Link from "next/link";
import { prisma } from "@/lib/db";
import { encodeCheckoutToken } from "@/lib/checkout";
import ToolsExplorer from "@/components/ToolsExplorer";

export const revalidate = 300;

export const metadata: Metadata = {
  title: "All Premium Tools — SEMrush, Canva, ChatGPT & 100+ More",
  description:
    "Browse 100+ professional tools at exclusive discounted rates. Perfect for seo specialist, content writers and more.",
};

export default async function ToolsPage() {
  const tools = await prisma.tool.findMany({
    where: { isPrivate: false },
    include: { category: true },
    orderBy: { sortOrder: "asc" },
  });

  const categories = [
    ...new Set(tools.map((t) => t.category?.name).filter((n): n is string => Boolean(n))),
  ];

  return (
    <>
      <section className="border-b border-slate-100 bg-gradient-to-b from-brand-50/60 to-white py-16">
        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
          <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl">
            Explore All Tools
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-slate-500">
            Browse 100+ professional tools at exclusive discounted rates. Perfect for seo
            specialist, content writers and more
          </p>
        </div>
      </section>

      <section className="bg-white py-10">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col items-center justify-between gap-6 rounded-3xl bg-gradient-to-r from-brand-600 to-indigo-600 px-8 py-10 text-center sm:flex-row sm:text-left">
            <div>
              <p className="text-sm font-semibold text-brand-100">Save More, Work Smarter</p>
              <h2 className="mt-2 text-2xl font-extrabold text-white">
                Unlock more features, more flexibility – Save with Our Bundles!
              </h2>
              <p className="mt-2 max-w-2xl text-sm text-brand-100">
                Get access to exclusive tools and advanced features, with savings that grow as you
                upgrade.
              </p>
            </div>
            <Link
              href="/packages/"
              className="shrink-0 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-brand-700 shadow-lg transition-transform hover:scale-105"
            >
              View Pricing
            </Link>
          </div>
        </div>
      </section>

      <section className="bg-white pb-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <ToolsExplorer
            tools={tools.map((t) => ({
              name: t.name,
              slug: t.slug,
              price: t.price,
              period: t.period,
              iconUrl: t.iconUrl,
              badge: t.badge,
              categoryName: t.category?.name ?? null,
              checkoutToken: encodeCheckoutToken({ type: "tool", id: t.id }),
            }))}
            categories={categories}
          />
        </div>
      </section>
    </>
  );
}