import type { ReactNode } from "react";

import { Launcher, LauncherSkeleton } from "@/client/pages/launcher";
import { useSessionWithInitialPending } from "@/client/lib/auth-client";
import { useClientConfig } from "@/client/lib/config";

const metadatumLinkClass =
  "block truncate font-mono text-sm text-zinc-300 underline decoration-zinc-700 underline-offset-[6px] transition-colors hover:text-accent-400 hover:decoration-accent-500/60";

const Metadatum = ({ label, children }: { label: string; children: ReactNode }) => (
  <>
    <dt className="text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500">{label}</dt>
    <dd className="min-w-0">{children}</dd>
  </>
);

export const LandingPage = () => {
  const session = useSessionWithInitialPending();
  const config = useClientConfig();
  const issuerUrl = config?.status === "ok" ? config.issuer : null;

  // Signed-in users land on the app launcher (Notion/Linear pattern):
  // the marketing copy below is for first-time visitors and the not-yet-
  // signed-in. Avoiding navigate() here keeps the URL at `/` stable when
  // moving between launcher and settings — the user's "home" is always
  // the slash.
  if (session.data) {
    return <Launcher greetingName={session.data.user.name || session.data.user.email} />;
  }
  if (session.isInitialPending) {
    return <LauncherSkeleton />;
  }

  // Render the issuer host derived from /api/config so preview / staging
  // deploys reflect their own deployed origin instead of a hard-coded
  // production label. Falls back to the relative `/` (and a placeholder
  // label) until the config call resolves.
  const issuerLabel = issuerUrl ? new URL(issuerUrl).host : "—";
  const issuerHref = issuerUrl ?? "/";

  return (
    <div className="mx-auto max-w-2xl py-12 sm:py-20">
      <h1 className="mb-10 font-display text-[clamp(2.25rem,6.5vw,4rem)] font-semibold leading-[1.04] tracking-tight text-zinc-100">
        Single sign-on for limic.
      </h1>

      <p className="mb-16 max-w-[60ch] text-base leading-[1.7] text-zinc-300">
        A hand-cut OAuth 2.1 and OpenID Connect provider. tessera issues one stable subject claim per human, recognized
        by <span className="text-zinc-100">anvil</span>, <span className="text-zinc-100">bland</span>,{" "}
        <span className="text-zinc-100">flamemail</span>,{" "}
        <span className="text-zinc-100">git&#8209;on&#8209;cloudflare</span>, and Cloudflare Access. Sign in with email,
        GitHub, or Google. Registration is invite-only.
      </p>

      <div aria-hidden="true" className="mb-10 h-px w-12 bg-zinc-800/80" />

      <dl className="grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-8 gap-y-4">
        <Metadatum label="Issuer">
          {issuerUrl ? (
            <a href={issuerHref} target="_blank" rel="noopener noreferrer" className={metadatumLinkClass}>
              {issuerLabel}
            </a>
          ) : (
            <a href={issuerHref} className={metadatumLinkClass}>
              {issuerLabel}
            </a>
          )}
        </Metadatum>
        <Metadatum label="OIDC discovery">
          <a href="/.well-known/openid-configuration" className={metadatumLinkClass}>
            /.well-known/openid-configuration
          </a>
        </Metadatum>
        <Metadatum label="OAuth metadata">
          <a href="/.well-known/oauth-authorization-server" className={metadatumLinkClass}>
            /.well-known/oauth-authorization-server
          </a>
        </Metadatum>
        <Metadatum label="JWKS">
          <a href="/api/auth/jwks" className={metadatumLinkClass}>
            /api/auth/jwks
          </a>
        </Metadatum>
      </dl>
    </div>
  );
};