import { ReactNode } from "react";
import AdminSidebar from "@/components/admin/AdminSidebar";
import MobileTabBar from "@/components/admin/MobileTabBar";
import OfflineBanner from "@/components/admin/OfflineBanner";
import { useMediaQuery } from "@/lib/use-media-query"; // see Task 1.9

interface AdminShellProps {
  userRole: string | null;
  brandIds?: string[];
  activeBrandId?: string | null;
  brands: { id: string; name: string; slug: string; logo_url: string | null }[];
  enabledAddons?: Record<string, boolean>;
  children: ReactNode;
}

export function AdminShell(props: AdminShellProps) {
  const isDesktop = useMediaQuery("(min-width: 1024px)");

  if (isDesktop) {
    return (
      <>
        <AdminSidebar
          userRole={props.userRole}
          brandIds={props.brandIds}
          activeBrandId={props.activeBrandId}
          brands={props.brands}
          enabledAddons={props.enabledAddons}
        />
        <div
          id="page-content"
          className="min-h-screen lg:pl-60 outline-none"
          style={{ backgroundColor: "var(--color-surface)" }}
        >
          {props.children}
        </div>
      </>
    );
  }

  return (
    <>
      <OfflineBanner />
      <div
        id="page-content"
        className="min-h-screen pb-20 outline-none"
        style={{ backgroundColor: "var(--color-surface)" }}
      >
        {props.children}
      </div>
      <MobileTabBar />
    </>
  );
}

export default AdminShell;