import Link from "next/link";
import type { ReactNode } from "react";
import { redirect } from "next/navigation";
import { getCtx, canEditLeads, canConfigure, ROLE_LABEL } from "@/lib/ctx";
import { supabaseServer } from "@/lib/supabase/server";

async function logout() {
  "use server";
  const db = await supabaseServer();
  await db.auth.signOut();
  redirect("/login");
}

export default async function AppLayout({ children }: { children: ReactNode }) {
  const c = await getCtx();
  return (
    <>
      <nav className="nav">
        <span className="org">{c.orgName || "WA Tracker"}</span>
        {c.role && <Link href="/">Dashboard</Link>}
        {c.role && <Link href="/leads">Lead</Link>}
        {c.role && canEditLeads(c.role) && <Link href="/leads/new">+ Lead baru</Link>}
        {c.role && canConfigure(c.role) && <Link href="/settings">Pengaturan</Link>}
        {c.isSuper && <Link href="/admin">Admin</Link>}
        <span className="sp" />
        <span className="muted" style={{ whiteSpace: "nowrap" }}>
          {c.name}
          {c.role ? ` · ${ROLE_LABEL[c.role]}` : ""}
        </span>
        <form action={logout}>
          <button>Keluar</button>
        </form>
      </nav>
      <main>{children}</main>
    </>
  );
}