import {ReactNode} from "react";
import {redirect} from "next/navigation";
import Link from "next/link";
import {auth} from "@/auth";
import {User, Calendar, Heart, Bell, Settings} from "lucide-react";

type AccountLayoutProps = {
  children: ReactNode;
  params: Promise<{locale: string}>;
};

export default async function AccountLayout({children, params}: AccountLayoutProps) {
  const {locale} = await params;
  const session = await auth();

  if (!session?.user?.id) {
    redirect(`/${locale}/auth/sign-in`);
  }

  const navLinks = [
    {href: `/${locale}/account`, label: "Overview", icon: User, exact: true},
    {href: `/${locale}/account/profile`, label: "Profile", icon: Settings, exact: false},
    {href: `/${locale}/account/bookings`, label: "My Bookings", icon: Calendar, exact: false},
    {href: `/${locale}/account/favorites`, label: "Favorites", icon: Heart, exact: false},
    {href: `/${locale}/account/notifications`, label: "Notifications", icon: Bell, exact: false}
  ];

  return (
    <div className="mx-auto max-w-7xl px-6 py-10">
      <div className="flex flex-col gap-8 lg:flex-row">
        {/* Sidebar */}
        <aside className="lg:w-64 shrink-0">
          <div className="sticky top-24 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
            <div className="mb-4 border-b border-slate-100 pb-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-lg font-bold text-white">
                {(session.user.name?.[0] ?? session.user.email?.[0] ?? "U").toUpperCase()}
              </div>
              <p className="mt-2 font-semibold text-slate-900 truncate">{session.user.name ?? "User"}</p>
              <p className="text-xs text-slate-500 truncate">{session.user.email}</p>
            </div>
            <nav className="space-y-1">
              {navLinks.map(({href, label, icon: Icon}) => (
                <Link
                  key={href}
                  href={href}
                  className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900"
                >
                  <Icon className="h-4 w-4 shrink-0" />
                  {label}
                </Link>
              ))}
            </nav>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 min-w-0">{children}</main>
      </div>
    </div>
  );
}