import { Trans, useLingui } from "@lingui/react/macro";
import type { Bot, ComputerStatus } from "@rakazo/contracts";
import { Maximize2 } from "lucide-react";
import type { ReactNode } from "react";
import {
  ComputersUnavailableHint,
  computersAreUnavailable,
} from "../../components/ComputersUnavailableHint";
import { AgentCursor } from "../../components/computer/AgentCursor";
import {
  computerLabel,
  computerPlaceholder,
  DesktopKindEmptyState,
  screenIframeSandbox,
} from "./computer-screen";
import { WorkspaceFilesView } from "./workspace-files";

/** The bot's screen in the side panel: a live, non-interactive preview that opens full window. */
export function ComputerPanelPreview({
  active,
  computer,
  computerOpen,
  booting,
  embeddedScreenUrl,
  computerScreenError,
  sandboxProvider,
  onOpen,
}: {
  active: Bot;
  computer: ComputerStatus | null;
  computerOpen: boolean;
  booting: boolean;
  embeddedScreenUrl: string | null;
  computerScreenError: ReactNode;
  sandboxProvider: string | undefined;
  onOpen: () => void;
}) {
  const { t } = useLingui();
  // Opening the panel never starts the computer, so a resting one shows its Open action outright.
  const resting =
    !booting &&
    computer?.state !== "running" &&
    computer?.state !== "booting" &&
    !computersAreUnavailable(sandboxProvider);
  return (
    <>
      <div
        data-testid="computer-preview"
        className="group relative aspect-[16/10] overflow-hidden rounded-[14px] bg-background"
      >
        {computerOpen ? (
          <div className="grid h-full place-items-center text-sm text-muted-foreground/80">
            <Trans>Open in full window</Trans>
          </div>
        ) : computer?.kind === "desktop" ? (
          <DesktopKindEmptyState className="grid h-full place-items-center px-6 text-center text-sm text-muted-foreground/80" />
        ) : computer?.state === "running" && embeddedScreenUrl && !computerScreenError ? (
          <>
            <iframe
              title={t`Bot screen preview`}
              src={embeddedScreenUrl}
              sandbox={screenIframeSandbox(embeddedScreenUrl)}
              className="h-full w-full border-0 bg-black"
              allow="clipboard-read; clipboard-write"
              style={{ pointerEvents: "none" }}
            />
            <AgentCursor botId={active.id} color={active.color} name={active.name} />
          </>
        ) : (
          <div className="grid h-full place-items-center px-6 text-center text-sm text-muted-foreground/80">
            {computerScreenError ??
              (computersAreUnavailable(sandboxProvider) ? (
                <ComputersUnavailableHint />
              ) : (
                computerPlaceholder(
                  computer?.state,
                  booting,
                  computerLabel(computer?.mode, active.name),
                )
              ))}
          </div>
        )}
        {!computerScreenError ? (
          <button
            type="button"
            data-testid="computer-preview-open"
            data-resting={resting ? "" : undefined}
            className="absolute inset-0 flex cursor-pointer items-center justify-center opacity-0 transition-opacity group-hover:bg-overlay/40 group-hover:opacity-100 focus-visible:bg-overlay/40 focus-visible:opacity-100 data-resting:items-end data-resting:pb-4 data-resting:opacity-100"
            aria-label={t`Open`}
            onClick={onOpen}
          >
            <span className="inline-flex items-center gap-2 rounded-full bg-overlay px-3.5 py-2 text-ui-body text-foreground shadow-md">
              <Maximize2 strokeWidth={1.9} aria-hidden className="size-icon-md" />
              <Trans>Open</Trans>
            </span>
          </button>
        ) : null}
      </div>
      <p className="mt-2 truncate text-ui-body text-muted-foreground" dir="auto">
        {t`${active.name}'s screen`}
      </p>
      <WorkspaceFilesView botId={active.id} />
    </>
  );
}