import { AppShell } from "@/components/app-shell"
import { LanguageSwitch } from "@/components/language-switch"
import { ThemeSwitch } from "@/components/theme-switch"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { translator } from "@/lib/i18n"
import { requireUser } from "@/lib/services/session"
import { PasswordForm } from "./password-form"

/**
 * The screen that is about the person rather than the work.
 *
 * `requireUser` and not `requireAtLeast`. Every one of the 193 has a password
 * and a language, and `routes.json` gives this route no tier at all.
 *
 * Two cards of the three the specification names. Notification preferences are
 * ELEVA-154: nothing exists behind them, and a switch that saves nowhere
 * teaches people that switches on this screen do not work.
 */
export default async function Page() {
  const user = await requireUser()
  const t = translator(user.language)

  return (
    <AppShell title="settings.title" user={user}>
      <div className="flex max-w-xl flex-col gap-4">
        <Card>
          <CardHeader>
            <CardTitle>{t("settings.password")}</CardTitle>
          </CardHeader>
          <CardContent>
            <PasswordForm />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("nav.language")}</CardTitle>
          </CardHeader>
          <CardContent>
            {/*
              The same control as the sidebar's, not a copy of it. Its own note
              says why both exist.
            */}
            <LanguageSwitch variant="page" />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("theme.label")}</CardTitle>
          </CardHeader>
          <CardContent>
            {/*
              Beside the language for the reader who came looking here, and in
              the sidebar for the one who cannot see well enough to get here.
              Unlike the language this is kept by the browser and not by the
              person, because it describes the room and not the reader.
            */}
            <ThemeSwitch variant="page" />
          </CardContent>
        </Card>
      </div>
    </AppShell>
  )
}