"use client";

// Live Pane tab body for missions running on a fleet node via Herdr.
// Attaches xterm.js to the node's Herdr TUI (WebRTC direct → WS-relay
// fallback). Rendered inline in MissionCanvas when
// mission.runtime_kind='local_herdr' and tab='pane'.

import { useEffect, useState } from "react";

import {
  nodeHerdrConnector,
  useResilientTerminal,
  type TermMode,
} from "@/components/computer/apps/terminal/core";
import "@xterm/xterm/css/xterm.css";

const mono =
  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";

export function MissionLivePane({
  nodeId,
  visible,
}: {
  nodeId: string | null;
  visible: boolean;
}) {
  if (!nodeId) {
    return (
      <div
        style={{
          padding: 40,
          textAlign: "center",
          color: "#8a8a92",
          fontSize: 13,
        }}
      >
        This mission has no target node.
      </div>
    );
  }
  return <LivePaneInner nodeId={nodeId} visible={visible} />;
}

function LivePaneInner({
  nodeId,
  visible,
}: {
  nodeId: string;
  visible: boolean;
}) {
  const [mode, setMode] = useState<TermMode>("connecting");
  const { hostRef, refit } = useResilientTerminal(
    {
      connect: nodeHerdrConnector(nodeId, setMode),
      autoFocus: false,
      visible: () => visible,
    },
    [nodeId],
  );
  useEffect(() => {
    if (visible) refit();
  }, [visible, refit]);
  return (
    <div
      style={{
        position: "relative",
        height: "70vh",
        minHeight: 480,
        background: "#0a0a0d",
        borderRadius: 10,
        border: "1px solid rgba(255,255,255,.06)",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          position: "absolute",
          top: 8,
          right: 8,
          zIndex: 5,
          padding: "2px 8px",
          borderRadius: 6,
          fontFamily: mono,
          fontSize: 10,
          letterSpacing: ".1em",
          textTransform: "uppercase",
          color:
            mode === "direct"
              ? "#5fd08a"
              : mode === "relayed"
                ? "#8a8a92"
                : "#e8b465",
          background:
            mode === "direct"
              ? "rgba(95,208,138,.12)"
              : "rgba(255,255,255,.05)",
          border: `1px solid ${
            mode === "direct" ? "rgba(95,208,138,.3)" : "rgba(255,255,255,.1)"
          }`,
        }}
      >
        {mode === "direct" ? "direct" : mode === "relayed" ? "relayed" : "connecting…"}
      </div>
      <div ref={hostRef} style={{ position: "absolute", inset: 0, padding: 8 }} />
    </div>
  );
}