import { Link, useNavigate } from "@tanstack/react-router";
import {
  Award,
  BarChart3,
  BookOpen,
  ClipboardList,
  CreditCard,
  Handshake,
  LogOut,
  Megaphone,
  UserRound,
} from "lucide-react";
import type { ReactNode } from "react";

import { Logo } from "@/components/site-header";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/hooks/useAuth";

const nav = [
  { to: "/dashboard", label: "Dashboard", icon: BarChart3 },
  { to: "/assess", label: "Assessment", icon: ClipboardList },
  { to: "/results", label: "My results", icon: BookOpen },
  { to: "/my-certificates", label: "Certificates", icon: Award },
  { to: "/mentors", label: "Mentors", icon: Handshake },
  { to: "/opportunities", label: "Opportunities", icon: Megaphone },
  { to: "/profile", label: "Profile", icon: UserRound },
  { to: "/pricing", label: "Plans", icon: CreditCard },
] as const;

export function AppShell({
  title,
  description,
  children,
}: {
  title: string;
  description?: string;
  children: ReactNode;
}) {
  const { signOut } = useAuth();
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-background">
      <header className="bg-plum text-plum-foreground">
        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
          <Logo />
          <Button
            variant="ghost"
            size="sm"
            className="text-plum-foreground hover:bg-white/10 hover:text-plum-foreground"
            onClick={async () => {
              await signOut();
              navigate({ to: "/" });
            }}
          >
            <LogOut className="mr-2 size-4" /> Sign out
          </Button>
        </div>
        <div className="mx-auto w-full max-w-6xl overflow-x-auto px-4">
          <nav className="flex gap-1 pb-1">
            {nav.map((item) => (
              <Link
                key={item.to}
                to={item.to}
                className="flex shrink-0 items-center gap-2 rounded-t-lg border-b-2 border-transparent px-3 py-2.5 text-sm font-medium opacity-70 transition-all hover:opacity-100"
                activeProps={{ className: "border-primary opacity-100" }}
              >
                <item.icon className="size-4" />
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
        <div className="motif-divider" />
      </header>

      <main className="mx-auto w-full max-w-6xl px-4 py-10">
        <h1 className="text-3xl sm:text-4xl">{title}</h1>
        {description ? (
          <p className="mt-3 max-w-2xl text-sm text-muted-foreground">{description}</p>
        ) : null}
        <div className="mt-8">{children}</div>
      </main>
    </div>
  );
}