import { NavCard } from "@/client/components/ui/nav-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 HUB_CARD_COUNT = 6;

const AccountHubSkeleton = () => (
  <div className="mx-auto max-w-3xl" aria-busy="true">
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-44" />
      <Skeleton className="h-4 w-64" />
    </div>
    <div className="flex flex-col gap-3">
      {Array.from({ length: HUB_CARD_COUNT }, (_, i) => (
        <div
          key={i}
          className="flex h-[5.5rem] items-center justify-between gap-4 rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-5 sm:p-6"
        >
          <div className="min-w-0 flex-1 space-y-2">
            <Skeleton className="h-5 w-32" />
            <Skeleton className="h-3 w-56" />
          </div>
          <Skeleton className="h-5 w-5 shrink-0 rounded-full" />
        </div>
      ))}
    </div>
  </div>
);

// `/account` is the settings hub. Each card is a focused subpage that
// owns one concern; the hub never edits anything inline. Adding new
// surfaces (2FA, email change, delete account) means appending another
// NavCard, not rearranging this page.
export const AccountPage = () => {
  const session = useRequireSession("/account");

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

  const sessionUser = session.data.user as SessionUser;
  const handle = sessionUser.preferredUsername ?? fallbackHandle(sessionUser);

  return (
    <div className="mx-auto max-w-3xl">
      <PageHeader title="Your account" description={`Signed in as ${session.data.user.email}.`} />
      <div className="flex flex-col gap-3">
        <NavCard
          to="/account/profile"
          title="Profile"
          description="Your name and username."
          meta={<code className="font-mono">{handle}</code>}
        />
        <NavCard
          to="/account/password"
          title="Password"
          description="Change the password on your email + password credential."
        />
        <NavCard
          to="/account/identities"
          title="Identities"
          description="Link or unlink GitHub and Google for sign-in."
        />
        <NavCard to="/account/sessions" title="Sessions" description="Devices currently signed in to tessera." />
        <NavCard
          to="/account/apps"
          title="Connected apps"
          description="Third-party apps you've authorized to sign you in."
        />
        <NavCard
          to="/account/userinfo"
          title="User info"
          description="The OIDC claims downstream apps see when you sign in."
        />
      </div>
    </div>
  );
};