MineGeo/app/settings/page.tsx

import { getI18n } from "@/lib/i18n";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Header, Footer } from "@/components/Shell";
import { AccountSettings } from "@/components/AccountSettings";
import { rawUser } from "@/lib/supabase";
import { accountProfile } from "@/lib/profile";
import { Username } from "@/components/Username";
import { ShieldCheck } from "lucide-react";
export async function generateMetadata() {
  const { t } = await getI18n();
  return { title: t("Account settings") };
}
export default async function Settings({
  searchParams,
}: {
  searchParams: Promise<{ password?: string }>;
}) {
  const { t } = await getI18n();
  const account = await rawUser();
  if (!account) redirect("/log-in?next=%2Fsettings");
  const [profile, query] = await Promise.all([
    accountProfile(account),
    searchParams,
  ]);
  const active = profile.account_status === "active";
  const statusLabel =
    profile.account_status === "banned"
      ? "Banned"
      : profile.account_status === "deactivated"
        ? "Deactivated"
        : profile.account_status === "deleting"
          ? "Deletion pending"
          : "Active";
  return (
    <>
      <Header />
      <main className="section page-content">
        <Link
          className="text-link"
          href={active ? "/dashboard" : "/ban/appeal"}
        >
          {t(active ? "← My account" : "← Account access & appeals")}
        </Link>
        <div className="account-page-heading">
          <span className="eyebrow">{t("YOUR CARTOGRAPHER ACCOUNT")}</span>
          <h1>{t("Account settings.")}</h1>
          <p className="lead">
            <Username name={profile.display_name} appearance={profile} /> ·{" "}
            {t("Your name, your sign-in, your next expedition.")}
          </p>
        </div>
        <section
          className="tool-card account-status-card"
          aria-labelledby="account-status-title"
        >
          <ShieldCheck size={24} aria-hidden="true" />
          <h2 id="account-status-title">{t("Account status")}</h2>
          <p>
            <span
              className="badge"
              data-account-status={profile.account_status}
            >
              {t(statusLabel)}
            </span>
          </p>
          <p>
            {t(
              active
                ? "Your account is active. You can use MineGeo normally."
                : "Account changes are disabled while access is restricted.",
            )}
          </p>
          {!active && profile.account_reason && (
            <p className="account-status-reason">{profile.account_reason}</p>
          )}
          {!active && (
            <Link className="button" href="/ban/appeal">
              {t("View account status & appeal")}
            </Link>
          )}
        </section>
        {active && (
          <AccountSettings
            accountId={account.id}
            email={account.email ?? ""}
            displayName={profile.display_name}
            bio={profile.bio}
            avatarPath={profile.avatar_path}
            appearance={profile}
            passwordUpdated={query.password === "updated"}
          />
        )}
      </main>
      <Footer />
    </>
  );
}