import { useLabContext } from "@/components/labs/context";
import { LabResourcesFocusedModeTrigger } from "@/components/labs/lab-resources-trigger";
import { useLabWebConsoles } from "@/components/labs/lab-web-consoles-context";
import { WebConsoleController } from "@/components/web-console/controller";
import { FloatingWindowV2 } from "@/components/web-console/floating-window-v2";
import { FloatingWindowsV2 } from "@/components/web-console/floating-windows-v2";
import { WebConsoleContainer } from "@/components/web-console/web-console-container";
import { cn } from "@/lib/utils";
import { TerminalIcon } from "lucide-react";
import { useMemo } from "react";

export function LabWebConsoles({
  constraintElement,
}: {
  constraintElement: HTMLElement | null;
}) {
  const { resources } = useLabContext();
  const {
    consoles,
    customConsolesCount,
    current,
    currentConsole,
    maxCount,
    setCurrent,
    newConsole,
    destroyConsole,
    destroyAllConsoles,
  } = useLabWebConsoles();

  const webSshResources = useMemo(() => {
    return (
      resources?.[0]?.resources?.filter((item) => item.Type === "Web SSH") ?? []
    );
  }, [resources]);
  const activeConsole = consoles.find((console) => console.id === current);
  const activeTab = activeConsole?.id ?? consoles[0]?.id;

  return (
    <FloatingWindowsV2 constraintElement={constraintElement}>
      {consoles.length > 0 && (
        <FloatingWindowV2
          tab={activeTab}
          beforeTabs={<LabResourcesFocusedModeTrigger />}
          tabs={consoles.map((console) => ({
            id: console.id,
            title: console.label ?? console.url,
            status: (
              <span
                className={cn(
                  "inline-flex size-2 mr-2 rounded-full transition-opacity opacity-50 group-aria-selected/tab:opacity-100 group-hover/tab:opacity-100",
                  {
                    connecting: "bg-yellow-400",
                    connected: "bg-green-400",
                    disconnected: "bg-zinc-400",
                  }[console.state]
                )}
              />
            ),
            onClose: destroyConsole,
          }))}
          newTabOptions={webSshResources.map((res) => ({
            label: (
              <>
                <TerminalIcon className="size-4" /> {res.Role}
              </>
            ),
            value: res.Role,
          }))}
          onTabChange={setCurrent}
          onNewTab={
            customConsolesCount() < maxCount
              ? (role) => {
                  const res = webSshResources.find((res) => res.Role === role);
                  if (res) {
                    newConsole({ url: res.Endpoint, label: res.Role });
                  }
                }
              : undefined
          }
          title={activeConsole?.title ?? currentConsole?.title}
          onClose={destroyAllConsoles}
        >
          <div className="size-full relative">
            {consoles.map((console) => (
              <LabWebConsole
                key={console.id}
                active={console.id === activeTab}
                controller={console.controller}
              />
            ))}
          </div>
        </FloatingWindowV2>
      )}
    </FloatingWindowsV2>
  );
}

function LabWebConsole({
  active,
  controller,
}: {
  active?: boolean;
  controller: WebConsoleController;
}) {
  return (
    <WebConsoleContainer
      className={cn(
        "size-full left-0 top-0 absolute bg-black",
        active ? "z-10" : "z-0"
      )}
      controller={controller}
    />
  );
}