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 { getCurrentCustomer } from "@/lib/auth/customer";

export const dynamic = "force-dynamic";

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>
        <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>
  );
}