import { getTranslations } from "next-intl/server";
import { headers } from "next/headers";

import { redirect } from "@/i18n/navigation";
import { routing, type Locale } from "@/i18n/routing";
import { auth } from "@/lib/auth";
import { listUserOrganizations } from "@/lib/data/organization";

import { ExistingOrgsList } from "./existing-orgs-list";
import { OnboardingForm } from "./onboarding-form";

export default async function OnboardingPage({ params }: { params: Promise<{ locale: Locale }> }) {
  const { locale } = await params;
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) redirect({ href: "/login", locale: locale ?? routing.defaultLocale });

  const t = await getTranslations("Onboarding");
  const orgs = await listUserOrganizations(session!.user.id);

  return (
    <main className="mx-auto flex max-w-md flex-col gap-6 px-4 py-12">
      <header className="flex flex-col gap-2 text-center">
        <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
        <p className="text-sm text-muted-foreground">{t("description")}</p>
      </header>

      <OnboardingForm />

      {orgs.length > 0 && (
        <section className="flex flex-col gap-3 border-t pt-6">
          <h2 className="text-sm font-medium text-muted-foreground">{t("existingTitle")}</h2>
          <ExistingOrgsList organizations={orgs} />
        </section>
      )}
    </main>
  );
}