import fs from "fs";
import path from "path";
import Link from "next/link";
import { notFound } from "next/navigation";

function formatTitle(slug: string) {
  return slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
}

export default async function ViewPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  if (process.env.ALLOW_RTF !== "true") notFound();

  const { slug } = await params;
  const htmlPath = path.join(process.cwd(), "public/html", `${slug}.html`);

  if (!fs.existsSync(htmlPath)) {
    notFound();
  }

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <header className="border-b border-border bg-card px-6 py-4 flex items-center gap-4 shrink-0">
        <Link
          href="/rtfs"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          &larr; RTF Documents
        </Link>
        <h1 className="text-lg font-semibold text-foreground">
          {formatTitle(slug)}
        </h1>
      </header>
      <main className="flex-1">
        <iframe
          src={`/html/${slug}.html`}
          className="w-full h-[calc(100vh-65px)] border-0"
          title={formatTitle(slug)}
        />
      </main>
    </div>
  );
}