import type { ITheme } from '@xterm/xterm';

/**
 * ANSI terminal colors — standard palette, not derived from the app theme.
 * These are used for syntax highlighting, command output, etc.
 */
const ansiColors = {
  black: '#1e1e1e',
  red: '#f44747',
  green: '#6a9955',
  yellow: '#dcdcaa',
  blue: '#569cd6',
  magenta: '#c586c0',
  cyan: '#4ec9b0',
  white: '#d4d4d4',
  brightBlack: '#808080',
  brightRed: '#f44747',
  brightGreen: '#6a9955',
  brightYellow: '#dcdcaa',
  brightBlue: '#569cd6',
  brightMagenta: '#c586c0',
  brightCyan: '#4ec9b0',
  brightWhite: '#ffffff',
} as const;

/**
 * Build the xterm.js theme by resolving CSS custom properties from the DOM.
 *
 * xterm's WebGL addon renders onto a <canvas> so it can't use CSS variables
 * directly — we read computed values at terminal creation time instead.
 *
 * All theme-dependent colors come from CSS variables defined in globals.css,
 * so changing the app theme in one place updates terminals too.
 */
export function getTerminalTheme(container: HTMLElement): ITheme {
  const s = getComputedStyle(container);
  const v = (name: string) => s.getPropertyValue(name).trim();

  return {
    background: v('--card'),
    foreground: v('--foreground'),
    cursor: v('--foreground'),
    cursorAccent: v('--background'),
    selectionBackground: v('--muted'),
    ...ansiColors,
  };
}