import { Archive, Home, Search, Settings, SlidersHorizontal, UserRound } from "lucide-react";
import type { ReactNode } from "react";
import type { Session } from "../api/types";
import { navigate } from "../router";

const navItems = [
  { href: "/home", label: "Accueil", icon: Home },
  { href: "/search", label: "Recherche", icon: Search },
  { href: "/admin/libraries", label: "Admin", icon: Settings },
  { href: "/admin/automation", label: "Automatisation", icon: SlidersHorizontal },
  { href: "/me", label: "Profil", icon: UserRound }
];

export function AppShell({ children, session, readerLayout = false }: { children: ReactNode; session: Session; readerLayout?: boolean }) {
  return (
    <div className="app-shell">
      <aside className="side-rail">
        <button className="brand-button" onClick={() => navigate("/home")} aria-label="ReadaBook">
          <Archive size={22} />
          <span>ReadaBook</span>
        </button>
        <nav>
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <button key={item.href} onClick={() => navigate(item.href)} title={item.label}>
                <Icon size={19} />
                <span>{item.label}</span>
              </button>
            );
          })}
        </nav>
        <div className="session-chip">{session.user ? session.user.email : "Mode vitrine"}</div>
      </aside>
      <main className={readerLayout ? "app-main-reader" : undefined}>{children}</main>
    </div>
  );
}