import Link from "next/link";
import type { ReactNode } from "react";
import { LogoutButton } from "@/components/LogoutButton";
import { apiGet } from "@/lib/server-api";
import { isRestricted } from "@/lib/access";
import type { Me } from "@/lib/types";

export const dynamic = "force-dynamic";

const roleLabel = { owner: "owner", admin: "admin", viewer: "leitura" } as const;

export default async function PainelLayout({ children }: { children: ReactNode }) {
  const me = await apiGet<Me>("/auth/me");
  const isOwner = me.account.role === "owner";
  const restricted = isRestricted(me.account);

  return (
    <>
      <header className="topbar">
        <div className="topbar-inner">
          <Link href="/" className="brand">
            Bot de Pontos
          </Link>
          <nav>
            <Link href="/">Início</Link>
            <Link href="/usuarios">Usuários</Link>
            <Link href="/notificacoes">Lembretes</Link>
            {!restricted && <Link href="/auditoria">Auditoria</Link>}
            <Link href="/feriados">Feriados</Link>
            {!restricted && <Link href="/configuracoes">Configurações</Link>}
            {isOwner && <Link href="/contas">Contas</Link>}
          </nav>
          <div className="whoami">
            <span className="muted">
              {me.account.username} ({roleLabel[me.account.role]})
            </span>
            <LogoutButton />
          </div>
        </div>
      </header>
      <main className="container">{children}</main>
    </>
  );
}