import { useRouter } from "@tanstack/react-router";
import { signOut } from "~/fns/auth";
import { resetAnalytics } from "~/lib/analytics";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { Callout } from "~/ui/Callout";
import { Heading } from "~/ui/Heading";
import { PageContainer } from "~/ui/PageContainer";
import type { DisabledNotice } from "~/lib/account-disable";

/** Replaces every page for a browser whose session belongs to a disabled account. */
export function DisabledAccountNotice({ notice }: { notice: DisabledNotice }) {
  const router = useRouter();
  const logout = useAction(signOut);
  async function handleSignOut() {
    await logout.run({});
    resetAnalytics();
    await router.invalidate();
  }
  return (
    <PageContainer className="max-w-xl space-y-4 py-16">
      <Heading>Account disabled</Heading>
      <Callout tone="danger" role="alert">
        {notice.message}
      </Callout>
      {notice.supportEmail && (
        <p className="text-sm text-kumo-default">
          Support:{" "}
          <a className="text-accent-400 hover:underline" href={`mailto:${notice.supportEmail}`}>
            {notice.supportEmail}
          </a>
        </p>
      )}
      <Button onClick={() => void handleSignOut()} disabled={logout.pending}>
        Sign out
      </Button>
    </PageContainer>
  );
}