"use client";

import { useEffect } from "react";
import { useParams } from "next/navigation";
import { ProtectedRoute } from "@/components/AuthGuards";
import BusinessShell from "@/components/BusinessShell";
import { setManagedBusinessId } from "@/lib/managed-business";
import { useAuth } from "@/components/AuthProvider";

function ManageBusinessBootstrap({ children }: { children: React.ReactNode }) {
  const params = useParams<{ meshkeeId: string }>();
  const meshkeeId = String(params.meshkeeId ?? "");
  const { isLoading } = useAuth();

  useEffect(() => {
    if (meshkeeId) setManagedBusinessId(meshkeeId);
  }, [meshkeeId]);

  if (isLoading) {
    return (
      <div
        style={{
          minHeight: "100vh",
          display: "grid",
          placeItems: "center",
          background: "#f6f6f6",
          fontSize: 12,
          letterSpacing: "0.2em",
          textTransform: "uppercase",
          color: "#8e8e8e",
        }}
      >
        Loading
      </div>
    );
  }

  return (
    <BusinessShell manageMeshkeeId={meshkeeId}>{children}</BusinessShell>
  );
}

export default function ManageBusinessLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ProtectedRoute requiredApp="admin">
      <ManageBusinessBootstrap>{children}</ManageBusinessBootstrap>
    </ProtectedRoute>
  );
}