import type { Metadata } from "next";
import type { ReactNode } from "react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Container } from "@/components/Section";
import { LogoutButton } from "@/components/auth/LogoutButton";
import { ResendVerificationButton } from "@/components/auth/ResendVerificationButton";
import { getCurrentCustomer } from "@/lib/auth/customer";

export const dynamic = "force-dynamic";
// Applies to every /konto/* page at once — private account area, never indexable.
export const metadata: Metadata = { robots: { index: false, follow: false } };

const navItems = [
  { title: "Übersicht", href: "/konto" },
  { title: "Kalender", href: "/konto/kalender" },
  { title: "Meine Termine", href: "/konto/termine" },
  { title: "Profil", href: "/konto/profil" },
];

export default async function KontoLayout({ children }: { children: ReactNode }) {
  const customer = await getCurrentCustomer();
  if (!customer) redirect("/login?next=/konto");

  return (
    <section className="bg-anouma-cream-light py-16">
      <Container>
        <div className="mb-10">
          <p className="text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">Mein Konto</p>
          <h1 className="mt-2 font-serif text-3xl font-medium text-anouma-plum">Hallo, {customer.name}</h1>
        </div>
        {!customer.emailVerified && (
          <div className="mb-8 rounded-2xl bg-anouma-cream-beige p-5">
            <p className="text-sm font-medium text-anouma-plum">Bitte bestätige zuerst deine E-Mail-Adresse.</p>
            <p className="mt-1 text-sm text-anouma-plum/80">
              Erst danach kannst du Termine anfragen. Prüfe dein Postfach oder fordere unten eine neue E-Mail an.
            </p>
            <ResendVerificationButton variant="session" className="mt-3" />
          </div>
        )}
        <div className="grid gap-10 lg:grid-cols-[220px_1fr]">
          <nav aria-label="Konto-Navigation" className="flex gap-2 overflow-x-auto lg:flex-col lg:gap-1">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="whitespace-nowrap rounded-full px-4 py-2.5 text-sm font-medium text-anouma-plum transition-colors hover:bg-white lg:rounded-2xl"
              >
                {item.title}
              </Link>
            ))}
            <LogoutButton className="whitespace-nowrap rounded-full px-4 py-2.5 text-left text-sm font-medium text-anouma-plum/70 transition-colors hover:bg-white lg:rounded-2xl" />
          </nav>
          <div className="min-w-0">{children}</div>
        </div>
      </Container>
    </section>
  );
}