import { Outlet } from "react-router-dom";
import { useAdminSession } from "../hooks/useAdminSession";
import { AdminNavigation } from "./AdminNavigation";
import { ProductionBadge } from "./ProductionBadge";

export function AdminLayout() {
  const { logout, operatorEmail } = useAdminSession();

  return (
    <div className="min-h-screen bg-background text-foreground">
      <div className="grid min-h-screen gap-6 lg:grid-cols-[260px_minmax(0,1fr)] p-6">
        <aside className="rounded-[2rem] border border-border bg-card p-5 shadow-sm">
          <div className="flex flex-col gap-4">
            <ProductionBadge />
            <div>
              <p className="text-xs uppercase tracking-[0.25em] text-foreground/55">Operator</p>
              <p className="mt-2 text-sm font-medium">{operatorEmail ?? "Unknown operator"}</p>
            </div>
            <AdminNavigation />
            <form action="/__admin/logout" method="post">
              <button
                className="w-full rounded-2xl border border-border px-3 py-2 text-left text-sm font-medium text-foreground/75 hover:bg-black/5"
                onClick={() => logout()}
                type="submit"
              >
                Lock Admin App
              </button>
            </form>
          </div>
        </aside>

        <section className="rounded-[2rem] border border-border bg-card/80 p-6 shadow-sm">
          <Outlet />
        </section>
      </div>
    </div>
  );
}
