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 { user } from "@/lib/supabase";
import { accountProfile } from "@/lib/profile";
import { Username } from "@/components/Username";
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 user();
  if (!account) redirect("/log-in?next=%2Fsettings");
  const [profile, query] = await Promise.all([
    accountProfile(account),
    searchParams,
  ]);
  return (
    <>
      <Header />
      <main className="section page-content">
        <Link className="text-link" href="/dashboard">
          {t("← My account")}
        </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>
        <AccountSettings
          email={account.email ?? ""}
          displayName={profile.display_name}
          appearance={profile}
          passwordUpdated={query.password === "updated"}
        />
      </main>
      <Footer />
    </>
  );
}