import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { Container, SectionHeading, Button, FormPanel } from "@/components/ui";
import { getCurrentCustomer, getTwoFactorBackupCodesDisplay } from "@/lib/auth";
import { dismissBackupCodesAction } from "../../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export const metadata: Metadata = { title: "Backup-Codes" };
export const dynamic = "force-dynamic";

export default async function ZweiFaktorBackupCodesPage() {
  const t = getDictionary(await getLocale());
  const customer = await getCurrentCustomer();
  if (!customer) redirect("/konto");

  const codes = await getTwoFactorBackupCodesDisplay();
  if (!codes) redirect("/konto/zwei-faktor");

  return (
    <div className="py-20">
      <Container className="max-w-lg">
        <FormPanel>
        <SectionHeading
          title={t.twoFactorBackupCodesPage.title}
          subtitle={t.twoFactorBackupCodesPage.subtitle}
        />

        <ol className="mt-8 grid grid-cols-2 gap-2">
          {codes.map((code, i) => (
            <li
              key={code}
              className="flex items-center gap-3 border border-ink/10 bg-surface/50 px-3 py-3 font-mono text-sm tabular-nums tracking-wider text-heading"
            >
              <span className="text-[10px] text-ink/45 tabular-nums">{String(i + 1).padStart(2, "0")}</span>
              {code}
            </li>
          ))}
        </ol>

        <p className="mt-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">
          {t.twoFactorBackupCodesPage.warning}
        </p>

        <form action={dismissBackupCodesAction} className="mt-8">
          <Button type="submit">{t.twoFactorBackupCodesPage.done}</Button>
        </form>
      </FormPanel>
      </Container>
    </div>
  );
}