"use client";

import LabFooter from "@/components/labs/lab-footer";
import { LabInstanceProvider } from "@/components/labs/lab-instance-context";
import { LabLayoutV3 } from "@/components/labs/lab-layout-v3";
import { LabMain } from "@/components/labs/lab-main";
import { LabNavV2 } from "@/components/labs/lab-nav";
import { LabResourcesDialog } from "@/components/labs/lab-resources-dialog";
import { LabSide } from "@/components/labs/lab-side";
import { LabSideFooter } from "@/components/labs/lab-side-footer";
import { LabWebConsoles } from "@/components/labs/lab-web-consoles";
import { LabWebConsolesProvider } from "@/components/labs/lab-web-consoles-provider";
import type { LabInstanceMeta } from "@/lib/api/labs.v2";
import { useSearchParams } from "next/navigation";
import { useState } from "react";

export default function LabV2({
  instance: propInstance,
}: {
  instance: LabInstanceMeta;
}) {
  const searchParams = useSearchParams();
  const step = parseInt(searchParams.get("step") ?? "0");

  const [constraintElement, setConstraintElement] =
    useState<HTMLElement | null>(null);

  return (
    <LabInstanceProvider
      id={propInstance.id}
      labInstanceMeta={propInstance}
      step={step}
    >
      <LabWebConsolesProvider>
        <LabLayoutV3
          side={<LabSide />}
          nav={<LabNavV2 />}
          sideFooter={<LabSideFooter />}
          mainFooter={<LabFooter />}
          main={<LabMain />}
          consoleConstraint={
            <div
              className="size-full rounded-lg transition-colors"
              ref={setConstraintElement}
            />
          }
        />
        <LabWebConsoles constraintElement={constraintElement} />
        <LabResourcesDialog />
      </LabWebConsolesProvider>
    </LabInstanceProvider>
  );
}