import { auth, SIGN_IN_PATH } from "@/auth";
import { getUserByEmail } from "@/db/users";
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { connection } from "next/server";
import { Suspense } from "react";
import { AuthShell } from "../_components/auth-shell";
import { signOutToHome } from "./actions";

export const metadata: Metadata = {
  title: "Account — SchemaTax",
  robots: { index: false, follow: false },
};

const dateTime = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "UTC",
});
const date = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeZone: "UTC",
});

export default function AccountPage() {
  return (
    <AuthShell>
      <h1 className="text-3xl leading-tight font-extrabold tracking-tight">
        Your account
      </h1>
      <Suspense fallback={<div className="mt-8 h-56" />}>
        <AccountDetails />
      </Suspense>
    </AuthShell>
  );
}

async function AccountDetails() {
  // Auth.js reaches for crypto before it reads the cookie; mark the request
  // first so prerendering stops here.
  await connection();
  const session = await auth();
  const email = session?.user?.email;
  if (!email) redirect(SIGN_IN_PATH);
  const user = await getUserByEmail(email);
  if (!user) redirect(SIGN_IN_PATH);

  const rows = [
    ["Email", user.email],
    ["Member since", date.format(user.createdAt)],
    [
      "Last sign-in",
      user.lastSignInAt
        ? `${dateTime.format(user.lastSignInAt)} UTC`
        : "Not recorded",
    ],
    ["Sign-ins", String(user.signInCount)],
  ];

  return (
    <>
      <dl className="divide-rule border-rule bg-paper mt-8 divide-y rounded-sm border">
        {rows.map(([term, value]) => (
          <div
            key={term}
            className="flex flex-col gap-1 px-4 py-3 sm:flex-row sm:justify-between sm:gap-6"
          >
            <dt className="text-ink-soft text-sm">{term}</dt>
            <dd className="font-mono text-sm [overflow-wrap:anywhere]">
              {value}
            </dd>
          </div>
        ))}
      </dl>
      <form action={signOutToHome} className="mt-8">
        <button
          type="submit"
          className="border-ink/20 hover:border-ink rounded-sm border px-5 py-3 font-semibold"
        >
          Sign out
        </button>
      </form>
    </>
  );
}