// Argus Dark — xterm.js theme object
const argusTheme = {
  // Canvas + cursor
  "background":       "#0D0D0D",  // slightly deeper than app bg — terminal feels inset
  "foreground":       "#C8C8C0",  // warm-shifted off-white — default text (no ANSI escape)
  "cursor":           "#C15F3C",  // brand orange — THE signature moment
  "cursorAccent":     "#0D0D0D",  // char under block cursor = bg color
  "selection":        "rgba(193,95,60,0.25)",  // orange tint, semi-transparent

  // ANSI base 8
  "black":            "#1E1E1E",  // warm dark — not pure black
  "red":              "#C0392B",  // argus_red — errors, dead session, stderr
  "green":            "#3FB950",  // argus_green — live, success, pass
  "yellow":           "#D29922",  // argus_yellow — warnings, stale, filenames
  "blue":             "#4D9EDA",  // argus_blue — dirs, links, info
  "magenta":          "#B06EC0",  // warm purple — docker inspect, bold contexts
  "cyan":             "#4DB8B0",  // warm teal — k8s output, env vars
  "white":            "#C8C8C0",  // same as foreground

  // ANSI bright 8
  "brightBlack":      "#4E4E4E",  // argus_dim — comments, timestamps, line numbers
  "brightRed":        "#D9534F",  // bold error emphasis
  "brightGreen":      "#56D364",  // bold success — pytest PASSED
  "brightYellow":     "#E8BB3F",  // warm gold — bold warning
  "brightBlue":       "#79B8F8",  // keyword syntax, type names, bold links
  "brightMagenta":    "#C678DD",  // bold magenta
  "brightCyan":       "#6ACFCA",  // bold teal — strings in some shell configs
  "brightWhite":      "#F0F0E8"   // near-white warm — highest contrast text
};

// xterm.js config
const termOptions = {
  theme: argusTheme,
  fontFamily: "'JetBrains Mono', ui-monospace, Menlo, monospace",
  cursorStyle: "block",
  cursorBlink: true
};

/* ── Argus Overlay Bar ─────────────────────────── */
/* NOTE: use position:fixed in prod (this preview  */
/* uses position:absolute). All else copy-paste.   */

#argus-overlay {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  height: 40px;
  background: rgba(12, 10, 8, 0.94);
  border-top: 1px solid rgba(193, 95, 60, 0.20);
  display: flex;
  align-items: center;
  padding: 0 12px 0 10px;
  gap: 10px;
  user-select: none;
}

#argus-dot {
  width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
  background: #3FB950;
  animation: argus-pulse 2s ease-in-out infinite;
}
#argus-dot.detached {
  background: #D29922;
  animation: none; opacity: 0.75;
}
#argus-dot.dead {
  background: #4E4E4E;
  animation: none; opacity: 0.50;
}
@keyframes argus-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}

#argus-status {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: rgba(200, 200, 192, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
/* Kotlin innerHTML: <strong>name</strong> · uptime */
#argus-status strong {
  color: #C15F3C; font-weight: 600;
}

#argus-morph {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; height: 32px;  /* > 30px tap-target floor */
  background: rgba(193, 95, 60, 0.10);
  border: 1px solid rgba(193, 95, 60, 0.28);
  border-radius: 3px;
  color: #C15F3C;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 500;
  text-decoration: none;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
#argus-morph:active {
  background: rgba(193, 95, 60, 0.20);
  border-color: rgba(193, 95, 60, 0.45);
}

/* REQUIRED: clear xterm canvas for overlay */
.xterm-screen { padding-bottom: 40px; }

/* REQUIRED — stops page competing with xterm scroll */
html, body {
  background: #0D0D0D;
  margin: 0;
  overflow: hidden;
}

/* OPTIONAL — warm vignette. pointer-events:none,
   no blur, no box-shadow — perf-safe in WebView. */
.argus-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    ellipse 90% 80% at 50% 50%,
    transparent 55%,
    rgba(6, 4, 3, 0.50) 100%
  );
}

/* OPTIONAL — scanlines at 3.5% opacity.
   Set opacity:0 to disable.
   background-attachment:fixed OMITTED — buggy WebView. */
.argus-scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9997;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.035) 3px, rgba(0,0,0,0.035) 4px
  );
}

/* Add before </body>:
   <div class="argus-vignette"></div>
   <div class="argus-scanlines"></div> */

// Standard key → xterm.js action
// esc   → term.write('\x1b')
// tab   → term.write('\t')
// ctrl  → modifier latch (combinator)
// alt   → modifier latch
// ↑↓←→  → '\x1b[A' '\x1b[B' '\x1b[D' '\x1b[C'
// home  → term.write('\x1b[H')
// end   → term.write('\x1b[F')
// |     → term.write('|')
// -     → term.write('-')
// /     → term.write('/')

// Combinator (ctrl latch example)
if (ctrlLatched) {
  const code = key.charCodeAt(0) - 64;
  term.write(String.fromCharCode(code));
  ctrlLatched = false;
}

// Tmux chips insert argument text + trailing space
// -s          → term.write('-s ')
// -t          → term.write('-t ')
// new-session → term.write('new-session ')
// -A          → term.write('-A ')

// Common build with chips:
// [new-session] [-A] [-s] name
// → "tmux new-session -A -s argus"

/* Orange-tint visual diff from standard key: */
.kc-tmux {
  background: rgba(193, 95, 60, 0.07);
  border-color: rgba(193, 95, 60, 0.22);
  color: rgba(193, 95, 60, 0.85);
  font-size: 11sp;
}

const solarizedDarkTheme = {
  "background":    "#002B36",
  "foreground":    "#839496",
  "cursor":        "#CB4B16",  // Solarized orange — brand signature
  "cursorAccent":  "#002B36",
  "selection":     "rgba(203, 75, 22, 0.25)",
  "black":         "#073642",
  "red":           "#DC322F",
  "green":         "#859900",
  "yellow":        "#B58900",
  "blue":          "#268BD2",
  "magenta":       "#D33682",
  "cyan":          "#2AA198",
  "white":         "#EEE8D5",
  "brightBlack":   "#002B36",
  "brightRed":     "#CB4B16",
  "brightGreen":   "#586E75",
  "brightYellow":  "#657B83",
  "brightBlue":    "#839496",
  "brightMagenta": "#6C71C4",
  "brightCyan":    "#93A1A1",
  "brightWhite":   "#FDF6E3"
};

const draculaTheme = {
  "background":    "#282A36",
  "foreground":    "#F8F8F2",
  "cursor":        "#FF79C6",  // Dracula pink — accent signature
  "cursorAccent":  "#282A36",
  "selection":     "rgba(255, 121, 198, 0.25)",
  "black":         "#21222C",
  "red":           "#FF5555",
  "green":         "#50FA7B",
  "yellow":        "#F1FA8C",
  "blue":          "#BD93F9",
  "magenta":       "#FF79C6",
  "cyan":          "#8BE9FD",
  "white":         "#F8F8F2",
  "brightBlack":   "#6272A4",
  "brightRed":     "#FF6E6E",
  "brightGreen":   "#69FF94",
  "brightYellow":  "#FFFFA5",
  "brightBlue":    "#D6ACFF",
  "brightMagenta": "#FF92DF",
  "brightCyan":    "#A4FFFF",
  "brightWhite":   "#FFFFFF"
};