import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { getSessionCustomer, getCustomerProfile } from "../../lib/customerAuth";
import { getShippingCountries } from "../../lib/payload";
import { KontoShell } from "../components/KontoShell";
import { AccountIdentity } from "../components/AccountIdentity";
import { ProfileForm } from "./components/ProfileForm";
import { PasswordForm } from "./components/PasswordForm";
import { VerificationBanner } from "./components/VerificationBanner";
import { AccountDataSection } from "./components/AccountDataSection";

export const metadata: Metadata = {
  title: "Mein Profil",
  description: "Verwalte deine Kontodaten und dein Passwort bei einfach produktiv.",
  robots: { index: false, follow: true },
};

export default async function KontoProfilPage({
  searchParams,
}: {
  searchParams: Promise<{ verified?: string }>;
}) {
  const session = await getSessionCustomer();
  if (!session) redirect("/konto/login");

  const [profile, shippingCountries] = await Promise.all([getCustomerProfile(session.token), getShippingCountries()]);
  if (!profile) redirect("/konto/login");

  const { verified } = await searchParams;

  return (
    <KontoShell>
      <div className="flex flex-col gap-10 items-start w-full max-w-[40rem]">
        <div className="flex flex-col gap-1 items-start w-full">
          <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
            Mein Profil
          </p>
          <AccountIdentity email={profile.email} customerNumber={session.customer.customerNumber} />
        </div>
        <VerificationBanner emailVerified={profile.emailVerified} justVerified={verified === "1" || verified === "0" ? verified : undefined} />
        <ProfileForm profile={profile} shippingCountries={shippingCountries} />
        <PasswordForm email={profile.email} />
        <AccountDataSection />
      </div>
    </KontoShell>
  );
}
