import { Trans, useLingui } from "@lingui/react/macro";
import type { Bot, ComputerStatus } from "@rakazo/contracts";
import { Button, cn } from "@rakazo/ui-web";
import { X } from "lucide-react";
import { useEffect, useState } from "react";
import { agentPointerFeed } from "../../lib/agent-pointer";
import { LocalBrowserPreview } from "./LocalBrowserPreview";
import { OoComputerBrowser } from "./OoComputerBrowser";

export type InAppBrowserMode = "oo" | "local";

export function InAppBrowser({
  onClose,
  active,
  computer,
  embeddedScreenUrl,
  computerScreenError,
  sandboxProvider,
  booting,
  onRefreshScreen,
  onOpenComputer,
  hideCloseButton = false,
}: {
  onClose: () => void;
  active: Bot | null;
  computer: ComputerStatus | null;
  embeddedScreenUrl: string | null;
  computerScreenError: React.ReactNode;
  sandboxProvider: string | undefined;
  booting: boolean;
  onRefreshScreen: () => Promise<unknown>;
  onOpenComputer?: () => void;
  hideCloseButton?: boolean;
}) {
  const { t } = useLingui();
  const [mode, setMode] = useState<InAppBrowserMode>("oo");

  useEffect(() => {
    if (!active?.id) return;
    return agentPointerFeed.subscribe(active.id, () => {
      setMode("oo");
    });
  }, [active?.id]);

  return (
    <div className="flex h-full min-h-0 flex-col" data-testid="in-app-browser">
      <div className="flex items-center justify-between gap-2 border-b px-2 py-1">
        <div className="flex min-w-0 flex-1 gap-1 overflow-x-auto">
          <Button
            type="button"
            size="sm"
            variant={mode === "oo" ? "secondary" : "ghost"}
            className="shrink-0 rounded-full"
            disabled={!active}
            data-testid="in-app-browser-mode-oo"
            onClick={() => setMode("oo")}
          >
            {active ? <Trans>{active.name}'s browser</Trans> : <Trans>Oo browser</Trans>}
          </Button>
          <Button
            type="button"
            size="sm"
            variant={mode === "local" ? "secondary" : "ghost"}
            className="shrink-0 rounded-full"
            data-testid="in-app-browser-mode-local"
            onClick={() => setMode("local")}
          >
            <Trans>Local preview</Trans>
          </Button>
        </div>
        {!hideCloseButton ? (
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label={t`Close panel`}
            onClick={onClose}
          >
            <X strokeWidth={1.8} className="size-icon-md" />
          </Button>
        ) : null}
      </div>
      <div className={cn("flex min-h-0 flex-1 flex-col", mode === "local" ? "" : "")}>
        {mode === "local" ? (
          <LocalBrowserPreview />
        ) : active ? (
          <OoComputerBrowser
            active={active}
            computer={computer}
            embeddedScreenUrl={embeddedScreenUrl}
            computerScreenError={computerScreenError}
            sandboxProvider={sandboxProvider}
            booting={booting}
            onRefreshScreen={onRefreshScreen}
            onOpenComputer={onOpenComputer}
          />
        ) : (
          <div className="grid flex-1 place-items-center px-6 text-center text-ui-body-sm text-muted-foreground">
            <Trans>Select an Oo to open its browser.</Trans>
          </div>
        )}
      </div>
    </div>
  );
}