import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ToolLayout } from "@/components/tools/ToolLayout";
import { ToolRenderer } from "@/components/tools/ToolRenderer";
import { getToolBySlug, toolRegistry } from "@/tools/registry";

interface ToolPageProps {
  params: Promise<{
    slug: string;
  }>;
}

export function generateStaticParams() {
  const staticToolPages = new Set([
    "qr-code-generator",
    "password-generator",
    "percent-calculator",
  ]);

  return toolRegistry
    .filter((tool) => !staticToolPages.has(tool.slug))
    .map((tool) => ({ slug: tool.slug }));
}

export async function generateMetadata({ params }: ToolPageProps): Promise<Metadata> {
  const { slug } = await params;
  const tool = getToolBySlug(slug);
  if (!tool) return {};

  return {
    title: { absolute: tool.seoTitle },
    description: tool.seoDescription,
    keywords: tool.keywords,
    alternates: { canonical: `/tools/${tool.slug}` },
    openGraph: {
      title: tool.seoTitle,
      description: tool.seoDescription,
      url: `/tools/${tool.slug}`,
      type: "website",
    },
  };
}

export default async function DynamicToolPage({ params }: ToolPageProps) {
  const { slug } = await params;
  const tool = getToolBySlug(slug);
  if (!tool) notFound();

  return (
    <ToolLayout tool={tool}>
      <ToolRenderer tool={tool} />
    </ToolLayout>
  );
}