import Link from "next/link";
import Image from "next/image";
import { redirect } from "next/navigation";
import { Camera, Home, Languages, User } from "lucide-react";
import { getSession } from "@/lib/auth/session";
import { BottomNavLink } from "./BottomNavLink";

export default async function AppLayout({ children }: { children: React.ReactNode }) {
  const session = await getSession();
  if (!session) redirect("/");
  if (!session.targetLang || !session.level) redirect("/onboarding");

  return (
    <div className="min-h-screen bg-[#F8FBFF] text-[#4B4B4B]">
      <header className="mx-auto flex w-full max-w-6xl items-center px-4 pt-4 sm:px-6 sm:pt-6">
        <Link href="/phrases" className="flex items-center gap-3 text-[#3C3C3C]">
          <Image
            src="/logo.png"
            alt="PraxaLing logo"
            width={48}
            height={48}
            className="h-12 w-12 rounded-xl border-2 border-black object-cover shadow-[3px_3px_0px_rgba(0,0,0,1)]"
          />
          <span className="text-lg font-black leading-none">PraxaLing</span>
        </Link>
      </header>

      <main className="duo-safe-bottom mx-auto w-full max-w-6xl px-4 py-5 sm:px-6 sm:py-7 md:pb-28">
        {children}
      </main>

      <nav className="fixed inset-x-0 bottom-0 z-50 border-t-3 border-black bg-white px-4 pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 shadow-[0_-4px_0_rgba(0,0,0,0.06)]">
        <div className="mx-auto grid max-w-2xl grid-cols-4 gap-2">
          <BottomNavLink href="/phrases" icon={<Languages size={21} strokeWidth={2.5} />} label="Phrases" />
          <BottomNavLink href="/camera" icon={<Camera size={21} strokeWidth={2.5} />} label="Camera" />
          <BottomNavLink href="/practice" icon={<Home size={21} strokeWidth={2.5} />} label="Practice" />
          <BottomNavLink href="/profile" icon={<User size={21} strokeWidth={2.5} />} label="Profile" />
        </div>
      </nav>
    </div>
  );
}