import type { Metadata } from "next";
import { notFound } from "next/navigation";

import { AppShell } from "@/components/shared/app-shell";
import { EmptyStatePanel } from "@/components/shared/state-panels";
import { ToolPageShell } from "@/components/shared/tool-page-shell";
import { SITE_NAME } from "@/lib/site-config";
import { toolPageComponents } from "@/lib/tool-page-components";
import { getToolBySlug, isRegisteredToolSlug, registeredToolSlugs } from "@/lib/tools-registry";

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

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

  if (!tool) {
    return {
      title: "Tool Not Found",
      robots: {
        index: false,
        follow: false
      }
    };
  }

  const title = tool.title;
  const description = `${tool.description} Process your media in video.haus with fast, secure, server-powered tools.`;
  const canonicalPath = tool.route;

  return {
    title,
    description,
    alternates: {
      canonical: canonicalPath
    },
    keywords: [tool.title, "video tools", "creator workflow", "video.haus"],
    openGraph: {
      type: "website",
      siteName: SITE_NAME,
      title: `${tool.title} | video.haus`,
      description,
      url: canonicalPath,
      images: [
        {
          url: "/icon.svg",
          alt: `${tool.title} - video.haus`
        }
      ]
    },
    twitter: {
      card: "summary_large_image",
      title: `${tool.title} | video.haus`,
      description,
      images: ["/icon.svg"]
    }
  };
}

export function generateStaticParams() {
  return registeredToolSlugs.map((slug) => ({
    slug
  }));
}

export default async function ToolPage({ params }: ToolPageProps) {
  const { slug } = await params;

  if (!isRegisteredToolSlug(slug)) {
    notFound();
  }

  const tool = getToolBySlug(slug);

  if (!tool) {
    notFound();
  }

  const ToolComponent = toolPageComponents[slug];

  return (
    <AppShell>
      <ToolPageShell tool={tool}>
        {ToolComponent ? (
          <ToolComponent />
        ) : (
          <EmptyStatePanel
            title="Tool Not Yet Implemented"
            description="This route is registered but the page component is still in progress."
          />
        )}
      </ToolPageShell>
    </AppShell>
  );
}
