import { BackLink } from "@/client/components/ui/back-link";
import { Card } from "@/client/components/ui/card";
import { PageHeader } from "@/client/components/ui/page-header";
import { Skeleton } from "@/client/components/ui/skeleton";
import { useRequireSession } from "@/client/hooks/use-auth-guard";
import { type SessionUser } from "@/client/lib/auth-client";
import { fallbackHandle } from "@/client/lib/handle";

const ROW_CLASS =
  "flex flex-col gap-2 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
const LABEL_CLASS = "font-mono text-xs font-medium uppercase tracking-wider text-zinc-500";
const VALUE_CLASS = "flex min-w-0 flex-wrap items-center gap-2 sm:justify-end";
const CODE_CLASS = "break-all rounded bg-zinc-800/60 px-2 py-1 font-mono text-xs text-zinc-100";

const AccountUserInfoSkeleton = () => (
  <div className="mx-auto max-w-3xl" aria-busy="true">
    <Skeleton className="mb-6 h-4 w-24" />
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-36" />
      <Skeleton className="h-4 w-80" />
    </div>
    <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-5 sm:p-6">
      <div className="flex flex-col divide-y divide-zinc-800/40">
        {Array.from({ length: 4 }, (_, i) => (
          <div key={i} className="flex items-center justify-between gap-4 py-4 first:pt-0 last:pb-0">
            <Skeleton className="h-4 w-36" />
            <Skeleton className="h-7 w-48" />
          </div>
        ))}
      </div>
    </div>
  </div>
);

export const AccountUserInfoPage = () => {
  const session = useRequireSession("/account/userinfo");

  if (session.isPending || !session.data) {
    return <AccountUserInfoSkeleton />;
  }

  const sessionUser = session.data.user as SessionUser;
  // OIDC `sub` is the Better Auth user id — see src/worker/auth/index.ts
  // customAccessTokenClaims/customUserInfoClaims. Surfacing it here so users
  // can paste it into RP support tickets without inspecting a token.
  const sub = sessionUser.id;
  const verified = sessionUser.emailVerified === true;
  const preferredUsername = sessionUser.preferredUsername ?? fallbackHandle(sessionUser);
  const trimmedName = sessionUser.name?.trim() ?? "";

  return (
    <div className="mx-auto max-w-3xl">
      <BackLink to="/account">Account</BackLink>
      <PageHeader title="User info" description="The OIDC claims downstream apps see when you sign in with tessera." />
      <Card>
        <dl className="flex flex-col divide-y divide-zinc-800/40">
          <div className={ROW_CLASS}>
            <dt className={LABEL_CLASS}>sub / tessera_sub</dt>
            <dd className={VALUE_CLASS}>
              <code className={CODE_CLASS}>{sub}</code>
            </dd>
          </div>
          <div className={ROW_CLASS}>
            <dt className={LABEL_CLASS}>email</dt>
            <dd className={VALUE_CLASS}>
              <code className={CODE_CLASS}>{sessionUser.email}</code>
              <span className={`text-xs ${verified ? "text-zinc-400" : "text-red-400"}`}>
                {verified ? "verified" : "unverified"}
              </span>
            </dd>
          </div>
          <div className={ROW_CLASS}>
            <dt className={LABEL_CLASS}>preferred_username</dt>
            <dd className={VALUE_CLASS}>
              <code className={CODE_CLASS}>{preferredUsername}</code>
            </dd>
          </div>
          {trimmedName ? (
            <div className={ROW_CLASS}>
              <dt className={LABEL_CLASS}>name</dt>
              <dd className={VALUE_CLASS}>
                <span className="text-sm text-zinc-100">{trimmedName}</span>
              </dd>
            </div>
          ) : null}
        </dl>
      </Card>
    </div>
  );
};