Ts Tui Game Skill

/**
 * Complete example: Simple roguelike-style TUI game
 *
 * Demonstrates all the patterns from the ts-tui-game-skill:
 * - Render scheduler
 * - State management with pure reducers
 * - Input routing
 * - 3-pane layout
 * - Modals
 * - Theme system
 */

import blessed from 'blessed';

// ============================================================================
// Theme
// ============================================================================

const theme = {
  fg: 'white',
  bg: 'black',
  panel: { fg: 'white', bg: 'black', border: { fg: '#555555' } },
  accent: { fg: 'black', bg: '#f4d03f' },
  danger: { fg: 'white', bg: '#e74c3c' },
  muted: { fg: '#888888', bg: 'black' },
  player: { fg: '#f4d03f' },
  enemy: { fg: '#e74c3c' },
  wall: { fg: '#555555' },
  floor: { fg: '#333333' },
};

// ============================================================================
// State Types & Reducer
// ============================================================================

interface Entity {
  x: number;
  y: number;
  char: string;
  color: string;
}

interface GameState {
  player: Entity;
  enemies: Entity[];
  map: number[][];
  log: string[];
  turn: number;
  modal: 'help' | 'inventory' | null;
}

type Action =
  | { type: 'MOVE'; dx: number; dy: number }
  | { type: 'LOG'; message: string }
  | { type: 'OPEN_MODAL'; modal: 'help' | 'inventory' }
  | { type: 'CLOSE_MODAL' };

function createInitialState(): GameState {
  // Simple 40x20 map (0=floor, 1=wall)
  const map: number[][] = [];
  for (let y = 0; y < 20; y++) {
    const row: number[] = [];
    for (let x = 0; x < 40; x++) {
      // Border walls
      if (x === 0 || x === 39 || y === 0 || y === 19) {
        row.push(1);
      } else if (Math.random() < 0.1) {
        // Random walls
        row.push(1);
      } else {
        row.push(0);
      }
    }
    map.push(row);
  }

  // Clear spawn area
  for (let y = 8; y < 12; y++) {
    for (let x = 18; x < 22; x++) {
      map[y][x] = 0;
    }
  }

  return {
    player: { x: 20, y: 10, char: '@', color: theme.player.fg },
    enemies: [
      { x: 5, y: 5, char: 'g', color: theme.enemy.fg },
      { x: 35, y: 15, char: 'g', color: theme.enemy.fg },
    ],
    map,
    log: ['Welcome! Use arrow keys or hjkl to move.', 'Press ? for help.'],
    turn: 0,
    modal: null,
  };
}

function reduce(state: GameState, action: Action): GameState {
  switch (action.type) {
    case 'MOVE': {
      const newX = state.player.x + action.dx;
      const newY = state.player.y + action.dy;

      // Bounds check
      if (newX < 0 || newX >= 40 || newY < 0 || newY >= 20) {
        return state;
      }

      // Wall collision
      if (state.map[newY][newX] === 1) {
        return {
          ...state,
          log: [...state.log, 'Blocked by wall.'].slice(-50),
        };
      }

      // Enemy collision
      const hitEnemy = state.enemies.find(
        (e) => e.x === newX && e.y === newY
      );
      if (hitEnemy) {
        return {
          ...state,
          enemies: state.enemies.filter((e) => e !== hitEnemy),
          player: { ...state.player, x: newX, y: newY },
          log: [...state.log, 'You defeated a goblin!'].slice(-50),
          turn: state.turn + 1,
        };
      }

      return {
        ...state,
        player: { ...state.player, x: newX, y: newY },
        turn: state.turn + 1,
      };
    }

    case 'LOG':
      return {
        ...state,
        log: [...state.log, action.message].slice(-50),
      };

    case 'OPEN_MODAL':
      return { ...state, modal: action.modal };

    case 'CLOSE_MODAL':
      return { ...state, modal: null };

    default:
      return state;
  }
}

// ============================================================================
// Render Scheduler
// ============================================================================

function createRenderScheduler(screen: blessed.Widgets.Screen, maxFps = 30) {
  let pending = false;
  const frameMs = Math.floor(1000 / maxFps);

  const timer = setInterval(() => {
    if (!pending) return;
    pending = false;
    screen.render();
  }, frameMs);

  return {
    requestRender() {
      pending = true;
    },
    stop() {
      clearInterval(timer);
    },
  };
}

// ============================================================================
// UI Components
// ============================================================================

function renderMap(
  element: blessed.Widgets.BoxElement,
  state: GameState
) {
  const lines: string[] = [];

  for (let y = 0; y < 20; y++) {
    let line = '';
    for (let x = 0; x < 40; x++) {
      // Player
      if (state.player.x === x && state.player.y === y) {
        line += `{${theme.player.fg}-fg}@{/}`;
        continue;
      }

      // Enemies
      const enemy = state.enemies.find((e) => e.x === x && e.y === y);
      if (enemy) {
        line += `{${theme.enemy.fg}-fg}${enemy.char}{/}`;
        continue;
      }

      // Terrain
      if (state.map[y][x] === 1) {
        line += `{${theme.wall.fg}-fg}#{/}`;
      } else {
        line += `{${theme.floor.fg}-fg}.{/}`;
      }
    }
    lines.push(line);
  }

  element.setContent(lines.join('\n'));
}

function renderSidebar(
  element: blessed.Widgets.BoxElement,
  state: GameState
) {
  const content = [
    `{bold}Player{/bold}`,
    `Position: ${state.player.x}, ${state.player.y}`,
    '',
    `{bold}Stats{/bold}`,
    `Turn: ${state.turn}`,
    `Enemies: ${state.enemies.length}`,
    '',
    `{bold}Controls{/bold}`,
    `Arrows/HJKL: Move`,
    `?: Help`,
    `I: Inventory`,
    `Q: Quit`,
  ].join('\n');

  element.setContent(content);
}

function renderLog(
  element: blessed.Widgets.BoxElement,
  state: GameState
) {
  const recentLogs = state.log.slice(-5);
  element.setContent(recentLogs.join('\n'));
}

// ============================================================================
// Modals
// ============================================================================

function createHelpModal(
  screen: blessed.Widgets.Screen,
  onClose: () => void
) {
  const overlay = blessed.box({
    parent: screen,
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    style: { bg: 'black', transparent: true },
  });

  const modal = blessed.box({
    parent: screen,
    top: 'center',
    left: 'center',
    width: '60%',
    height: '70%',
    border: 'line',
    label: ' Help ',
    tags: true,
    content: [
      '{bold}Movement{/bold}',
      '  Arrow keys or H J K L',
      '',
      '{bold}Actions{/bold}',
      '  Walk into enemies to attack',
      '',
      '{bold}Interface{/bold}',
      '  ? - This help screen',
      '  I - Inventory (placeholder)',
      '  Q - Quit game',
      '',
      '{gray-fg}Press ESC or Q to close{/gray-fg}',
    ].join('\n'),
    style: {
      fg: theme.fg,
      bg: theme.bg,
      border: { fg: theme.accent.bg },
      label: { fg: theme.accent.bg, bold: true },
    },
  });

  modal.focus();

  function close() {
    overlay.destroy();
    modal.destroy();
    onClose();
  }

  modal.key(['escape', 'q', '?'], close);

  return { overlay, modal, close };
}

// ============================================================================
// Main Application
// ============================================================================

function main() {
  // Create screen
  const screen = blessed.screen({
    smartCSR: true,
    autoPadding: true,
    fullUnicode: true,
    title: 'Simple Roguelike',
  });

  // Initialize systems
  const { requestRender, stop: stopRenderer } = createRenderScheduler(screen);

  // Initialize state
  let state = createInitialState();

  const dispatch = (action: Action) => {
    state = reduce(state, action);
    update();
    requestRender();
  };

  // Create layout
  const sidebarWidth = 25;
  const logHeight = 7;

  const mapPanel = blessed.box({
    parent: screen,
    top: 0,
    left: 0,
    width: `100%-${sidebarWidth}`,
    height: `100%-${logHeight}`,
    border: 'line',
    label: ' Dungeon ',
    tags: true,
    style: {
      fg: theme.fg,
      bg: theme.bg,
      border: theme.panel.border,
      label: { fg: theme.accent.bg },
    },
  });

  const sidebarPanel = blessed.box({
    parent: screen,
    top: 0,
    right: 0,
    width: sidebarWidth,
    height: `100%-${logHeight}`,
    border: 'line',
    label: ' Status ',
    tags: true,
    style: {
      fg: theme.fg,
      bg: theme.bg,
      border: theme.panel.border,
      label: { fg: theme.muted.fg },
    },
  });

  const logPanel = blessed.box({
    parent: screen,
    bottom: 0,
    left: 0,
    width: '100%',
    height: logHeight,
    border: 'line',
    label: ' Log ',
    tags: true,
    style: {
      fg: theme.fg,
      bg: theme.bg,
      border: theme.panel.border,
      label: { fg: theme.muted.fg },
    },
  });

  // Update function
  function update() {
    renderMap(mapPanel, state);
    renderSidebar(sidebarPanel, state);
    renderLog(logPanel, state);
  }

  // Input handling
  function handleKey(ch: string, key: blessed.Widgets.Events.IKeyEventArg) {
    // Modal state check
    if (state.modal) {
      return; // Modal handles its own input
    }

    const keyName = key.full || key.name || ch;

    // Global keys
    if (keyName === 'q' || keyName === 'C-c') {
      safeExit(0);
      return;
    }

    if (keyName === '?' || keyName === 'f1') {
      dispatch({ type: 'OPEN_MODAL', modal: 'help' });
      const { close } = createHelpModal(screen, () => {
        dispatch({ type: 'CLOSE_MODAL' });
      });
      requestRender();
      return;
    }

    if (keyName === 'i') {
      dispatch({ type: 'LOG', message: 'Inventory not implemented yet!' });
      return;
    }

    // Movement
    const directions: Record<string, { dx: number; dy: number }> = {
      up: { dx: 0, dy: -1 },
      k: { dx: 0, dy: -1 },
      down: { dx: 0, dy: 1 },
      j: { dx: 0, dy: 1 },
      left: { dx: -1, dy: 0 },
      h: { dx: -1, dy: 0 },
      right: { dx: 1, dy: 0 },
      l: { dx: 1, dy: 0 },
    };

    if (directions[keyName]) {
      dispatch({ type: 'MOVE', ...directions[keyName] });
    }
  }

  screen.on('keypress', handleKey);

  // Exit handling
  function safeExit(code: number) {
    try {
      stopRenderer();
      screen.destroy();
    } finally {
      process.exit(code);
    }
  }

  // Initial render
  update();
  requestRender();
}

// Run
main();

{
  "name": "simple-roguelike-example",
  "version": "1.0.0",
  "description": "Example TUI game using blessed",
  "main": "index.ts",
  "scripts": {
    "start": "npx ts-node index.ts",
    "build": "tsc",
    "dev": "npx ts-node-dev --respawn index.ts"
  },
  "dependencies": {
    "blessed": "^0.1.81"
  },
  "devDependencies": {
    "@types/blessed": "^0.1.25",
    "@types/node": "^20.0.0",
    "ts-node": "^10.9.0",
    "typescript": "^5.0.0"
  }
}

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": ".",
    "resolveJsonModule": true
  },
  "include": ["./**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

/**
 * Input handling and key routing
 *
 * Implements the router pattern for context-aware input handling.
 */

import blessed from 'blessed';
import type { GameState, Action, Panel } from './state';

// ============================================================================
// Types
// ============================================================================

export type KeyHandler = (
  ch: string,
  key: blessed.Widgets.Events.IKeyEventArg
) => boolean | void;

export type KeyBinding = {
  keys: string[];
  handler: () => void;
  description: string;
};

export interface InputContext {
  global: Record<string, KeyBinding>;
  map: Record<string, KeyBinding>;
  inventory: Record<string, KeyBinding>;
  modal: Record<string, KeyBinding>;
}

// ============================================================================
// Key Binding Definitions
// ============================================================================

export function createKeyBindings(
  dispatch: (action: Action) => void,
  callbacks: {
    exit: () => void;
    openHelp: () => void;
    openInventory: () => void;
  }
): InputContext {
  return {
    // Global keys (always active)
    global: {
      quit: {
        keys: ['q', 'C-c'],
        handler: callbacks.exit,
        description: 'Quit game',
      },
      help: {
        keys: ['?', 'f1'],
        handler: callbacks.openHelp,
        description: 'Show help',
      },
      pause: {
        keys: ['p'],
        handler: () => dispatch({ type: 'PAUSE' }),
        description: 'Pause game',
      },
    },

    // Map panel keys
    map: {
      moveUp: {
        keys: ['up', 'k', 'w'],
        handler: () => dispatch({ type: 'MOVE', dx: 0, dy: -1 }),
        description: 'Move up',
      },
      moveDown: {
        keys: ['down', 'j', 's'],
        handler: () => dispatch({ type: 'MOVE', dx: 0, dy: 1 }),
        description: 'Move down',
      },
      moveLeft: {
        keys: ['left', 'h', 'a'],
        handler: () => dispatch({ type: 'MOVE', dx: -1, dy: 0 }),
        description: 'Move left',
      },
      moveRight: {
        keys: ['right', 'l', 'd'],
        handler: () => dispatch({ type: 'MOVE', dx: 1, dy: 0 }),
        description: 'Move right',
      },
      openInventory: {
        keys: ['i'],
        handler: callbacks.openInventory,
        description: 'Open inventory',
      },
    },

    // Inventory panel keys
    inventory: {
      close: {
        keys: ['escape', 'i'],
        handler: () => dispatch({ type: 'CLOSE_MODAL' }),
        description: 'Close inventory',
      },
      selectUp: {
        keys: ['up', 'k'],
        handler: () => {}, // Handle in inventory component
        description: 'Select previous item',
      },
      selectDown: {
        keys: ['down', 'j'],
        handler: () => {}, // Handle in inventory component
        description: 'Select next item',
      },
      use: {
        keys: ['enter', 'u'],
        handler: () => {}, // Handle in inventory component
        description: 'Use selected item',
      },
    },

    // Modal keys (when any modal is open)
    modal: {
      close: {
        keys: ['escape', 'q'],
        handler: () => dispatch({ type: 'CLOSE_MODAL' }),
        description: 'Close modal',
      },
      confirm: {
        keys: ['enter', 'y'],
        handler: () => {}, // Handle in modal component
        description: 'Confirm',
      },
    },
  };
}

// ============================================================================
// Input Router
// ============================================================================

export function createInputRouter(
  screen: blessed.Widgets.Screen,
  getState: () => GameState,
  bindings: InputContext
) {
  function findBinding(
    context: Record<string, KeyBinding>,
    keyName: string
  ): KeyBinding | undefined {
    for (const binding of Object.values(context)) {
      if (binding.keys.includes(keyName)) {
        return binding;
      }
    }
    return undefined;
  }

  function handleKey(ch: string, key: blessed.Widgets.Events.IKeyEventArg) {
    const keyName = key.full || key.name || ch;
    const state = getState();

    // 1. Check global keys first
    const globalBinding = findBinding(bindings.global, keyName);
    if (globalBinding) {
      globalBinding.handler();
      return;
    }

    // 2. If modal is open, route to modal handlers
    if (state.ui.modal) {
      const modalBinding = findBinding(bindings.modal, keyName);
      if (modalBinding) {
        modalBinding.handler();
        return;
      }
      // Modal captures all input - don't fall through
      return;
    }

    // 3. Route to active panel
    const panelBindings = bindings[state.ui.activePanel as keyof InputContext];
    if (panelBindings && typeof panelBindings === 'object') {
      const binding = findBinding(
        panelBindings as Record<string, KeyBinding>,
        keyName
      );
      if (binding) {
        binding.handler();
        return;
      }
    }
  }

  // Attach to screen
  screen.on('keypress', handleKey);

  return {
    // Allow dynamic binding updates
    updateBindings(newBindings: Partial<InputContext>) {
      Object.assign(bindings, newBindings);
    },

    // Get help text for current context
    getHelpText(panel?: Panel): string[] {
      const lines: string[] = [];

      lines.push('=== Global Keys ===');
      for (const [name, binding] of Object.entries(bindings.global)) {
        lines.push(`  ${binding.keys.join('/')} - ${binding.description}`);
      }

      if (panel && bindings[panel]) {
        lines.push('');
        lines.push(`=== ${panel.charAt(0).toUpperCase() + panel.slice(1)} Keys ===`);
        const panelBindings = bindings[panel] as Record<string, KeyBinding>;
        for (const [name, binding] of Object.entries(panelBindings)) {
          lines.push(`  ${binding.keys.join('/')} - ${binding.description}`);
        }
      }

      return lines;
    },

    // Cleanup
    destroy() {
      screen.removeListener('keypress', handleKey);
    },
  };
}

// ============================================================================
// Direction Helpers
// ============================================================================

export const DIRECTIONS = {
  UP: { dx: 0, dy: -1 },
  DOWN: { dx: 0, dy: 1 },
  LEFT: { dx: -1, dy: 0 },
  RIGHT: { dx: 1, dy: 0 },
  UP_LEFT: { dx: -1, dy: -1 },
  UP_RIGHT: { dx: 1, dy: -1 },
  DOWN_LEFT: { dx: -1, dy: 1 },
  DOWN_RIGHT: { dx: 1, dy: 1 },
} as const;

export function keyToDirection(
  key: string
): { dx: number; dy: number } | undefined {
  const map: Record<string, { dx: number; dy: number }> = {
    up: DIRECTIONS.UP,
    k: DIRECTIONS.UP,
    w: DIRECTIONS.UP,
    down: DIRECTIONS.DOWN,
    j: DIRECTIONS.DOWN,
    s: DIRECTIONS.DOWN,
    left: DIRECTIONS.LEFT,
    h: DIRECTIONS.LEFT,
    a: DIRECTIONS.LEFT,
    right: DIRECTIONS.RIGHT,
    l: DIRECTIONS.RIGHT,
    d: DIRECTIONS.RIGHT,
    y: DIRECTIONS.UP_LEFT,
    u: DIRECTIONS.UP_RIGHT,
    b: DIRECTIONS.DOWN_LEFT,
    n: DIRECTIONS.DOWN_RIGHT,
  };
  return map[key];
}

/**
 * Layout composition for blessed TUI
 *
 * Implements the standard 3-pane game layout:
 * - Main viewport (fluid)
 * - Right sidebar (fixed)
 * - Bottom log (fixed)
 */

import blessed from 'blessed';
import { theme, applyTheme } from './theme';

// ============================================================================
// Layout Configuration
// ============================================================================

export interface LayoutConfig {
  sidebarWidth: number;
  logHeight: number;
  footerHeight: number;
  showFooter: boolean;
}

export const defaultLayoutConfig: LayoutConfig = {
  sidebarWidth: 30,
  logHeight: 8,
  footerHeight: 1,
  showFooter: true,
};

// ============================================================================
// Layout Elements
// ============================================================================

export interface LayoutElements {
  main: blessed.Widgets.BoxElement;
  sidebar: blessed.Widgets.BoxElement;
  log: blessed.Widgets.BoxElement;
  footer?: blessed.Widgets.BoxElement;
}

/**
 * Creates the standard 3-pane game layout
 */
export function createLayout(
  screen: blessed.Widgets.Screen,
  config: Partial<LayoutConfig> = {}
): LayoutElements {
  const cfg = { ...defaultLayoutConfig, ...config };

  const totalHeight = cfg.showFooter
    ? `100%-${cfg.logHeight + cfg.footerHeight}`
    : `100%-${cfg.logHeight}`;

  // Main viewport (map, scene, etc.)
  const main = blessed.box({
    parent: screen,
    top: 0,
    left: 0,
    width: `100%-${cfg.sidebarWidth}`,
    height: totalHeight,
    border: 'line',
    label: ' Game ',
    tags: true,
    style: {
      ...applyTheme(theme.panel),
      label: { fg: theme.accent.bg, bold: true },
    },
  });

  // Right sidebar (stats, inventory summary, minimap)
  const sidebar = blessed.box({
    parent: screen,
    top: 0,
    right: 0,
    width: cfg.sidebarWidth,
    height: totalHeight,
    border: 'line',
    label: ' Status ',
    tags: true,
    style: {
      ...applyTheme(theme.panel),
      label: { fg: theme.muted.fg },
    },
  });

  // Bottom log (messages, combat log)
  const logTop = cfg.showFooter
    ? `100%-${cfg.logHeight + cfg.footerHeight}`
    : `100%-${cfg.logHeight}`;

  const log = blessed.box({
    parent: screen,
    top: logTop,
    left: 0,
    width: '100%',
    height: cfg.logHeight,
    border: 'line',
    label: ' Log ',
    tags: true,
    scrollable: true,
    alwaysScroll: true,
    scrollbar: {
      ch: ' ',
      style: { bg: theme.scrollbar.bg },
    },
    style: {
      ...applyTheme(theme.panel),
      label: { fg: theme.muted.fg },
    },
  });

  const elements: LayoutElements = { main, sidebar, log };

  // Footer (controls hint, status)
  if (cfg.showFooter) {
    elements.footer = blessed.box({
      parent: screen,
      bottom: 0,
      left: 0,
      width: '100%',
      height: cfg.footerHeight,
      tags: true,
      style: applyTheme(theme.statusLine),
    });
  }

  return elements;
}

// ============================================================================
// Responsive Layout Handling
// ============================================================================

/**
 * Adjusts layout on terminal resize
 */
export function createResponsiveHandler(
  screen: blessed.Widgets.Screen,
  elements: LayoutElements,
  config: LayoutConfig,
  requestRender: () => void
) {
  const minSidebarWidth = 22;
  const maxSidebarWidth = 40;
  const minTerminalWidth = 80;

  function handleResize() {
    const width = screen.width as number;

    // Hide sidebar on very small terminals
    if (width < minTerminalWidth) {
      elements.sidebar.hide();
      elements.main.width = '100%';
    } else {
      elements.sidebar.show();

      // Dynamic sidebar width (25% of screen, within bounds)
      const targetWidth = Math.floor(width * 0.25);
      const newWidth = Math.max(
        minSidebarWidth,
        Math.min(maxSidebarWidth, targetWidth)
      );

      elements.sidebar.width = newWidth;
      elements.main.width = `100%-${newWidth}`;
    }

    requestRender();
  }

  screen.on('resize', handleResize);

  return {
    destroy() {
      screen.removeListener('resize', handleResize);
    },
  };
}

// ============================================================================
// Panel Helpers
// ============================================================================

/**
 * Creates a sub-panel within the sidebar
 */
export function createSidebarPanel(
  parent: blessed.Widgets.BoxElement,
  label: string,
  top: number | string,
  height: number | string
): blessed.Widgets.BoxElement {
  return blessed.box({
    parent,
    top,
    left: 0,
    width: '100%-2', // Account for parent border
    height,
    border: 'line',
    label: ` ${label} `,
    tags: true,
    style: {
      ...applyTheme(theme.panel),
      border: { fg: theme.border.fg },
      label: { fg: theme.muted.fg },
    },
  });
}

/**
 * Standard sidebar composition
 */
export function createStandardSidebar(sidebar: blessed.Widgets.BoxElement) {
  // Stats panel (top)
  const stats = createSidebarPanel(sidebar, 'Stats', 0, '40%');

  // Inventory summary (middle)
  const inventory = createSidebarPanel(sidebar, 'Items', '40%', '30%');

  // Minimap or other info (bottom)
  const info = createSidebarPanel(sidebar, 'Info', '70%', '30%-1');

  return { stats, inventory, info };
}

// ============================================================================
// Footer Helpers
// ============================================================================

/**
 * Updates footer with context-aware hints
 */
export function updateFooter(
  footer: blessed.Widgets.BoxElement | undefined,
  leftText: string,
  rightText: string
) {
  if (!footer) return;

  // Use {|} for justified layout
  footer.setContent(`${leftText}{|}${rightText}`);
}

/**
 * Standard footer format
 */
export function formatFooterHints(hints: Array<{ key: string; action: string }>) {
  return hints
    .map(({ key, action }) => `{bold}[${key}]{/bold} ${action}`)
    .join('  ');
}

/**
 * Main entry point for blessed TUI application
 *
 * This template demonstrates the recommended structure:
 * - Screen initialization
 * - Render scheduler
 * - Game loop
 * - Clean exit handling
 */

import blessed from 'blessed';
import { createScreen } from './ui/screen';
import { createApp } from './ui/app';
import { createRenderScheduler } from './engine/scheduler';
import { createInitialState } from './game/state';
import type { GameState, Action } from './game/state';
import { reduce } from './game/reducer';

// ============================================================================
// Main Application
// ============================================================================

function main() {
  // Initialize screen
  const screen = createScreen();

  // Create render scheduler (never call screen.render() directly!)
  const { requestRender, stop: stopRenderer } = createRenderScheduler(screen, 30);

  // Initialize game state
  let state = createInitialState();

  // Action dispatch function
  const dispatch = (action: Action) => {
    state = reduce(state, action);
    requestRender();
  };

  // Create UI
  const app = createApp(screen, state, dispatch, requestRender);

  // Game tick (simulation separate from rendering)
  const tickRate = 20; // 20 Hz simulation
  const tickTimer = setInterval(() => {
    // Process game logic here
    // Example: state = tickSystems(state);
    requestRender();
  }, Math.floor(1000 / tickRate));

  // Safe exit handler
  function safeExit(code = 0) {
    try {
      clearInterval(tickTimer);
      stopRenderer();
      screen.destroy();
    } finally {
      process.exit(code);
    }
  }

  // Global exit keys
  screen.key(['escape', 'q', 'C-c'], () => safeExit(0));

  // Handle resize
  screen.on('resize', () => {
    requestRender();
  });

  // Initial render
  requestRender();
}

// Run
main();

/**
 * Modal system for blessed TUI
 *
 * Implements the modal pattern:
 * 1. Semi-transparent overlay
 * 2. Centered modal box
 * 3. Input capture
 * 4. Focus restoration on close
 */

import blessed from 'blessed';
import { theme, applyTheme } from './theme';

// ============================================================================
// Types
// ============================================================================

export interface ModalOptions {
  title: string;
  content: string;
  width?: number | string;
  height?: number | string;
  buttons?: Array<{ label: string; value: string; default?: boolean }>;
}

export interface ModalInstance {
  overlay: blessed.Widgets.BoxElement;
  modal: blessed.Widgets.BoxElement;
  close: () => void;
  onClose: (callback: (value?: string) => void) => void;
}

// ============================================================================
// Base Modal
// ============================================================================

/**
 * Creates a modal with overlay
 */
export function createModal(
  screen: blessed.Widgets.Screen,
  options: ModalOptions
): ModalInstance {
  const {
    title,
    content,
    width = '60%',
    height = '50%',
  } = options;

  // Save current focus
  const savedFocus = screen.focused;

  // Semi-transparent overlay
  const overlay = blessed.box({
    parent: screen,
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    style: {
      bg: 'black',
      transparent: true,
    },
  });

  // Modal box
  const modal = blessed.box({
    parent: screen,
    top: 'center',
    left: 'center',
    width,
    height,
    border: 'line',
    label: ` ${title} `,
    content,
    tags: true,
    keys: true,
    style: {
      fg: theme.fg,
      bg: theme.bg,
      border: { fg: theme.accent.bg },
      label: { fg: theme.accent.bg, bold: true },
    },
  });

  modal.focus();

  // Close handlers
  let closeCallback: ((value?: string) => void) | undefined;

  function close(value?: string) {
    overlay.destroy();
    modal.destroy();

    if (savedFocus && !savedFocus.destroyed) {
      savedFocus.focus();
    }

    if (closeCallback) {
      closeCallback(value);
    }

    screen.render();
  }

  // Default close on escape
  modal.key(['escape'], () => close());

  return {
    overlay,
    modal,
    close,
    onClose(callback) {
      closeCallback = callback;
    },
  };
}

// ============================================================================
// Specialized Modals
// ============================================================================

/**
 * Help modal with key bindings
 */
export function createHelpModal(
  screen: blessed.Widgets.Screen,
  helpText: string[]
): ModalInstance {
  const content = [
    '{bold}Keyboard Controls{/bold}',
    '',
    ...helpText,
    '',
    '{gray-fg}Press ESC or Q to close{/gray-fg}',
  ].join('\n');

  const instance = createModal(screen, {
    title: 'Help',
    content,
    width: '70%',
    height: '70%',
  });

  instance.modal.key(['q'], () => instance.close());

  return instance;
}

/**
 * Confirm dialog
 */
export function createConfirmModal(
  screen: blessed.Widgets.Screen,
  message: string,
  onConfirm: () => void,
  onCancel?: () => void
): ModalInstance {
  const content = [
    message,
    '',
    '{bold}[Y]{/bold} Yes    {bold}[N]{/bold} No',
  ].join('\n');

  const instance = createModal(screen, {
    title: 'Confirm',
    content,
    width: '40%',
    height: 'shrink',
  });

  instance.modal.key(['y', 'enter'], () => {
    onConfirm();
    instance.close('yes');
  });

  instance.modal.key(['n', 'escape'], () => {
    if (onCancel) onCancel();
    instance.close('no');
  });

  return instance;
}

/**
 * Message/alert modal
 */
export function createMessageModal(
  screen: blessed.Widgets.Screen,
  title: string,
  message: string,
  timeout?: number
): ModalInstance {
  const content = [
    message,
    '',
    '{gray-fg}Press any key to close{/gray-fg}',
  ].join('\n');

  const instance = createModal(screen, {
    title,
    content,
    width: '50%',
    height: 'shrink',
  });

  // Close on any key
  instance.modal.on('keypress', () => instance.close());

  // Auto-close after timeout
  if (timeout) {
    setTimeout(() => {
      if (!instance.modal.destroyed) {
        instance.close();
      }
    }, timeout);
  }

  return instance;
}

/**
 * Input prompt modal
 */
export function createInputModal(
  screen: blessed.Widgets.Screen,
  title: string,
  prompt: string,
  defaultValue = ''
): Promise<string | undefined> {
  return new Promise((resolve) => {
    const instance = createModal(screen, {
      title,
      content: '',
      width: '50%',
      height: 10,
    });

    // Prompt label
    blessed.text({
      parent: instance.modal,
      top: 1,
      left: 1,
      content: prompt,
      style: { fg: theme.fg },
    });

    // Input box
    const input = blessed.textbox({
      parent: instance.modal,
      top: 3,
      left: 1,
      width: '100%-4',
      height: 3,
      border: 'line',
      style: {
        fg: theme.fg,
        bg: theme.bg,
        border: { fg: theme.border.fg },
        focus: { border: { fg: theme.accent.bg } },
      },
      inputOnFocus: true,
    });

    input.setValue(defaultValue);

    // Hint
    blessed.text({
      parent: instance.modal,
      bottom: 1,
      left: 1,
      content: '{gray-fg}Enter to confirm, Escape to cancel{/gray-fg}',
      tags: true,
    });

    input.focus();

    input.on('submit', (value) => {
      instance.close();
      resolve(value);
    });

    input.on('cancel', () => {
      instance.close();
      resolve(undefined);
    });

    screen.render();
  });
}

/**
 * List selection modal
 */
export function createListModal(
  screen: blessed.Widgets.Screen,
  title: string,
  items: string[]
): Promise<number | undefined> {
  return new Promise((resolve) => {
    const instance = createModal(screen, {
      title,
      content: '',
      width: '50%',
      height: '60%',
    });

    const list = blessed.list({
      parent: instance.modal,
      top: 0,
      left: 0,
      width: '100%-2',
      height: '100%-4',
      items,
      keys: true,
      vi: true,
      mouse: true,
      style: {
        fg: theme.fg,
        bg: theme.bg,
        selected: applyTheme(theme.selected),
        item: { fg: theme.fg },
      },
    });

    // Hint
    blessed.text({
      parent: instance.modal,
      bottom: 0,
      left: 1,
      content: '{gray-fg}Enter to select, Escape to cancel{/gray-fg}',
      tags: true,
    });

    list.focus();

    list.on('select', (item, index) => {
      instance.close();
      resolve(index);
    });

    list.key(['escape', 'q'], () => {
      instance.close();
      resolve(undefined);
    });

    screen.render();
  });
}

/**
 * Render and game tick scheduler
 *
 * Implements the critical pattern: never render on every event.
 * Uses a frame-based approach with configurable FPS.
 */

import blessed from 'blessed';

export interface RenderScheduler {
  requestRender(): void;
  stop(): void;
}

/**
 * Creates a render scheduler that batches render requests
 *
 * @param screen - The blessed screen to render
 * @param maxFps - Maximum frames per second (default: 30)
 */
export function createRenderScheduler(
  screen: blessed.Widgets.Screen,
  maxFps = 30
): RenderScheduler {
  let pending = false;
  const frameMs = Math.floor(1000 / maxFps);

  const timer = setInterval(() => {
    if (!pending) return;
    pending = false;
    screen.render();
  }, frameMs);

  return {
    requestRender() {
      pending = true;
    },
    stop() {
      clearInterval(timer);
    },
  };
}

export interface GameLoop {
  stop(): void;
  pause(): void;
  resume(): void;
  isPaused(): boolean;
}

/**
 * Creates a game tick loop separate from rendering
 *
 * @param onTick - Called every tick with delta time
 * @param tickRate - Ticks per second (default: 20)
 */
export function createGameLoop(
  onTick: (deltaMs: number) => void,
  tickRate = 20
): GameLoop {
  const tickMs = Math.floor(1000 / tickRate);
  let lastTick = Date.now();
  let paused = false;

  const timer = setInterval(() => {
    if (paused) return;

    const now = Date.now();
    const delta = now - lastTick;
    lastTick = now;

    onTick(delta);
  }, tickMs);

  return {
    stop() {
      clearInterval(timer);
    },
    pause() {
      paused = true;
    },
    resume() {
      paused = false;
      lastTick = Date.now();
    },
    isPaused() {
      return paused;
    },
  };
}

export interface FrameStats {
  fps: number;
  frameTime: number;
  tickTime: number;
}

/**
 * Performance monitoring for debugging
 */
export function createPerformanceMonitor() {
  let frameCount = 0;
  let lastFpsUpdate = Date.now();
  let currentFps = 0;
  let lastFrameTime = 0;
  let lastTickTime = 0;

  return {
    recordFrame(startTime: number) {
      frameCount++;
      lastFrameTime = Date.now() - startTime;

      const now = Date.now();
      if (now - lastFpsUpdate >= 1000) {
        currentFps = frameCount;
        frameCount = 0;
        lastFpsUpdate = now;
      }
    },

    recordTick(startTime: number) {
      lastTickTime = Date.now() - startTime;
    },

    getStats(): FrameStats {
      return {
        fps: currentFps,
        frameTime: lastFrameTime,
        tickTime: lastTickTime,
      };
    },
  };
}

/**
 * Screen initialization module
 *
 * Handles terminal setup with recommended defaults.
 */

import blessed from 'blessed';

export interface ScreenOptions {
  title?: string;
  smartCSR?: boolean;
  fastCSR?: boolean;
  fullUnicode?: boolean;
  debug?: boolean;
}

export function createScreen(options: ScreenOptions = {}) {
  const {
    title = 'TUI App',
    smartCSR = true,
    fastCSR = false,
    fullUnicode = true,
    debug = false,
  } = options;

  const screen = blessed.screen({
    smartCSR: !fastCSR && smartCSR,
    fastCSR,
    autoPadding: true,
    fullUnicode,
    warnings: debug,
    debug,
  });

  screen.title = title;

  return screen;
}

/**
 * Detect terminal capabilities
 */
export function detectTerminalFeatures() {
  const term = process.env.TERM || '';
  const colorTerm = process.env.COLORTERM || '';

  return {
    colors256: term.includes('256color') || colorTerm === 'truecolor',
    trueColor: colorTerm === 'truecolor' || colorTerm === '24bit',
    unicode: !term.includes('linux') && process.platform !== 'win32',
    mouse: process.platform !== 'win32',
    isWindows: process.platform === 'win32',
    isMac: process.platform === 'darwin',
  };
}

/**
 * Game state management
 *
 * Implements the single authoritative state pattern with pure reducers.
 * This module should have NO terminal dependencies (pure logic).
 */

// ============================================================================
// State Types
// ============================================================================

export interface Position {
  x: number;
  y: number;
}

export interface Player {
  position: Position;
  hp: number;
  maxHp: number;
  name: string;
}

export interface MapState {
  width: number;
  height: number;
  tiles: Uint8Array;
}

export type Panel = 'map' | 'inventory' | 'log' | 'stats';

export interface ModalState {
  type: 'help' | 'inventory' | 'dialog' | 'confirm';
  data?: unknown;
}

export interface UIState {
  activePanel: Panel;
  modal?: ModalState;
  logMessages: string[];
  maxLogMessages: number;
}

export interface GameState {
  time: number;
  player: Player;
  map: MapState;
  ui: UIState;
  paused: boolean;
}

// ============================================================================
// Action Types
// ============================================================================

export type Action =
  // Movement
  | { type: 'MOVE'; dx: number; dy: number }
  | { type: 'TELEPORT'; x: number; y: number }
  // Combat/Stats
  | { type: 'DAMAGE'; amount: number }
  | { type: 'HEAL'; amount: number }
  // UI
  | { type: 'SET_PANEL'; panel: Panel }
  | { type: 'OPEN_MODAL'; modal: ModalState }
  | { type: 'CLOSE_MODAL' }
  | { type: 'LOG_MESSAGE'; message: string }
  | { type: 'CLEAR_LOG' }
  // Game
  | { type: 'TICK' }
  | { type: 'PAUSE' }
  | { type: 'RESUME' }
  | { type: 'RESET' };

// ============================================================================
// Initial State Factory
// ============================================================================

export function createInitialState(): GameState {
  const mapWidth = 80;
  const mapHeight = 24;

  return {
    time: 0,
    paused: false,
    player: {
      position: { x: Math.floor(mapWidth / 2), y: Math.floor(mapHeight / 2) },
      hp: 100,
      maxHp: 100,
      name: 'Player',
    },
    map: {
      width: mapWidth,
      height: mapHeight,
      tiles: new Uint8Array(mapWidth * mapHeight).fill(0),
    },
    ui: {
      activePanel: 'map',
      modal: undefined,
      logMessages: [],
      maxLogMessages: 100,
    },
  };
}

// ============================================================================
// Reducer (Pure State Updates)
// ============================================================================

export function reduce(state: GameState, action: Action): GameState {
  switch (action.type) {
    // Movement
    case 'MOVE': {
      const newX = state.player.position.x + action.dx;
      const newY = state.player.position.y + action.dy;

      // Bounds check
      if (newX < 0 || newX >= state.map.width) return state;
      if (newY < 0 || newY >= state.map.height) return state;

      // Collision check (tile 1 = wall)
      const tileIndex = newY * state.map.width + newX;
      if (state.map.tiles[tileIndex] === 1) return state;

      return {
        ...state,
        player: {
          ...state.player,
          position: { x: newX, y: newY },
        },
      };
    }

    case 'TELEPORT': {
      return {
        ...state,
        player: {
          ...state.player,
          position: { x: action.x, y: action.y },
        },
      };
    }

    // Combat/Stats
    case 'DAMAGE': {
      const newHp = Math.max(0, state.player.hp - action.amount);
      return {
        ...state,
        player: { ...state.player, hp: newHp },
      };
    }

    case 'HEAL': {
      const newHp = Math.min(state.player.maxHp, state.player.hp + action.amount);
      return {
        ...state,
        player: { ...state.player, hp: newHp },
      };
    }

    // UI
    case 'SET_PANEL': {
      return {
        ...state,
        ui: { ...state.ui, activePanel: action.panel },
      };
    }

    case 'OPEN_MODAL': {
      return {
        ...state,
        ui: { ...state.ui, modal: action.modal },
      };
    }

    case 'CLOSE_MODAL': {
      return {
        ...state,
        ui: { ...state.ui, modal: undefined },
      };
    }

    case 'LOG_MESSAGE': {
      const messages = [...state.ui.logMessages, action.message];
      // Trim to max
      while (messages.length > state.ui.maxLogMessages) {
        messages.shift();
      }
      return {
        ...state,
        ui: { ...state.ui, logMessages: messages },
      };
    }

    case 'CLEAR_LOG': {
      return {
        ...state,
        ui: { ...state.ui, logMessages: [] },
      };
    }

    // Game
    case 'TICK': {
      if (state.paused) return state;
      return {
        ...state,
        time: state.time + 1,
      };
    }

    case 'PAUSE': {
      return { ...state, paused: true };
    }

    case 'RESUME': {
      return { ...state, paused: false };
    }

    case 'RESET': {
      return createInitialState();
    }

    default:
      return state;
  }
}

// ============================================================================
// Selectors (Derive computed values from state)
// ============================================================================

export const selectors = {
  getPlayerHealthPercent(state: GameState): number {
    return (state.player.hp / state.player.maxHp) * 100;
  },

  isPlayerAlive(state: GameState): boolean {
    return state.player.hp > 0;
  },

  getTile(state: GameState, x: number, y: number): number {
    if (x < 0 || x >= state.map.width) return -1;
    if (y < 0 || y >= state.map.height) return -1;
    return state.map.tiles[y * state.map.width + x];
  },

  hasModal(state: GameState): boolean {
    return state.ui.modal !== undefined;
  },

  getRecentLogs(state: GameState, count = 10): string[] {
    return state.ui.logMessages.slice(-count);
  },
};

/**
 * Theme system for blessed TUI applications
 *
 * Centralize all colors and styles here. Apply consistently.
 * Rule: 1 accent color, 1 danger color, everything else muted.
 */

export interface ThemeColors {
  fg: string;
  bg: string;
  border?: { fg: string; bg?: string };
}

export interface Theme {
  // Base colors
  fg: string;
  bg: string;

  // Panel styles
  panel: ThemeColors;

  // Semantic colors
  accent: ThemeColors;
  danger: ThemeColors;
  success: ThemeColors;
  warning: ThemeColors;
  muted: ThemeColors;

  // Interactive states
  selected: ThemeColors;
  focused: ThemeColors;
  hover: ThemeColors;

  // Specific elements
  border: { fg: string };
  scrollbar: { fg: string; bg: string };
  statusLine: ThemeColors;
}

/**
 * Default dark theme
 */
export const darkTheme: Theme = {
  fg: 'white',
  bg: 'black',

  panel: {
    fg: 'white',
    bg: 'black',
    border: { fg: '#888888' },
  },

  accent: {
    fg: 'black',
    bg: '#f4d03f',
  },

  danger: {
    fg: 'white',
    bg: '#e74c3c',
  },

  success: {
    fg: 'white',
    bg: '#27ae60',
  },

  warning: {
    fg: 'black',
    bg: '#f39c12',
  },

  muted: {
    fg: '#888888',
    bg: 'black',
  },

  selected: {
    fg: 'black',
    bg: 'white',
  },

  focused: {
    fg: 'white',
    bg: '#2c3e50',
    border: { fg: '#f4d03f' },
  },

  hover: {
    fg: 'white',
    bg: '#34495e',
  },

  border: { fg: '#555555' },

  scrollbar: {
    fg: '#888888',
    bg: '#333333',
  },

  statusLine: {
    fg: '#aaaaaa',
    bg: '#1a1a1a',
  },
};

/**
 * Light theme variant
 */
export const lightTheme: Theme = {
  fg: 'black',
  bg: 'white',

  panel: {
    fg: 'black',
    bg: 'white',
    border: { fg: '#666666' },
  },

  accent: {
    fg: 'white',
    bg: '#3498db',
  },

  danger: {
    fg: 'white',
    bg: '#e74c3c',
  },

  success: {
    fg: 'white',
    bg: '#27ae60',
  },

  warning: {
    fg: 'black',
    bg: '#f1c40f',
  },

  muted: {
    fg: '#666666',
    bg: 'white',
  },

  selected: {
    fg: 'white',
    bg: 'black',
  },

  focused: {
    fg: 'black',
    bg: '#ecf0f1',
    border: { fg: '#3498db' },
  },

  hover: {
    fg: 'black',
    bg: '#bdc3c7',
  },

  border: { fg: '#aaaaaa' },

  scrollbar: {
    fg: '#666666',
    bg: '#cccccc',
  },

  statusLine: {
    fg: '#555555',
    bg: '#eeeeee',
  },
};

/**
 * 16-color fallback theme for limited terminals
 */
export const basicTheme: Theme = {
  fg: 'white',
  bg: 'black',

  panel: {
    fg: 'white',
    bg: 'black',
    border: { fg: 'white' },
  },

  accent: {
    fg: 'black',
    bg: 'yellow',
  },

  danger: {
    fg: 'white',
    bg: 'red',
  },

  success: {
    fg: 'black',
    bg: 'green',
  },

  warning: {
    fg: 'black',
    bg: 'yellow',
  },

  muted: {
    fg: 'gray',
    bg: 'black',
  },

  selected: {
    fg: 'black',
    bg: 'white',
  },

  focused: {
    fg: 'white',
    bg: 'blue',
    border: { fg: 'cyan' },
  },

  hover: {
    fg: 'white',
    bg: 'blue',
  },

  border: { fg: 'white' },

  scrollbar: {
    fg: 'white',
    bg: 'gray',
  },

  statusLine: {
    fg: 'white',
    bg: 'blue',
  },
};

// Default export
export const theme = darkTheme;

/**
 * Helper to apply theme to blessed style object
 */
export function applyTheme(colors: ThemeColors) {
  return {
    fg: colors.fg,
    bg: colors.bg,
    ...(colors.border && { border: colors.border }),
  };
}