import Link from "next/link";
import { AuditForm } from "@/components/AuditForm";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { buttonVariants } from "@/components/ui/button";

/**
 * The shop window is elsewhere — this page exists so the form can be exercised
 * against the real API, on the same origin, without deploying one of the three
 * sites first. The two links below it are part of that: the whole path, from a
 * domain typed to a report read, has to be walkable here.
 *
 * `force-dynamic` because the site key is read at request time. Without it the
 * page is prerendered during `docker build`, where no environment exists on
 * purpose, and the key is frozen to the empty string for the life of the image.
 * The alternative — passing it as a build ARG — would tie an image to the
 * environment it was built for, and this image serves both roles.
 */
export const dynamic = "force-dynamic";

export default function Home() {
  const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? "";

  return (
    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center gap-8 px-6 py-20">
      <header>
        <h1 className="text-2xl font-semibold tracking-tight">
          Que sert vraiment votre site à Google&nbsp;?
        </h1>
        <p className="text-muted-foreground mt-2">
          Dix pages lues comme Googlebot les lit&nbsp;: rendu, indexabilité, hreflang.
        </p>
      </header>

      {siteKey ? (
        <AuditForm siteKey={siteKey} />
      ) : (
        <Alert variant="destructive">
          <AlertDescription>
            NEXT_PUBLIC_TURNSTILE_SITE_KEY n&apos;est pas défini&nbsp;: le formulaire ne peut pas
            afficher la vérification anti-robot. Voir <code>.env.example</code>.
          </AlertDescription>
        </Alert>
      )}

      <div className="text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
        <span>Déjà un rapport&nbsp;?</span>
        {/* `buttonVariants` rather than `<Button asChild>`: this style's Button
            renders a real <button> and takes no child to defer to, and a link
            has to be an anchor for middle-click and prefetch to work. */}
        <Link href="/auth" className={buttonVariants({ variant: "link", className: "h-auto p-0" })}>
          Se connecter
        </Link>
        {/* Redirects to /auth without a session, which makes it the shortest
            way to walk the whole flow from here. */}
        <Link
          href="/dashboard"
          className={buttonVariants({ variant: "link", className: "h-auto p-0" })}
        >
          Mes audits
        </Link>
      </div>
    </main>
  );
}