/**
 * Emdash CLI Design System.
 *
 * A zen, geometric design language combining clean lines with dot-matrix textures.
 * The em dash (─) is the signature element, appearing in all separators and frames.
 */

// ─────────────────────────────────────────────────────────────────────────────
// Logo & Branding
// ─────────────────────────────────────────────────────────────────────────────

// Compact logo - single line, stylized
export const LOGO_COMPACT = '─── ◈ emdash ◈ ───';

// Ultra-minimal logo with em dash signature
export const LOGO_MINIMAL = '── emdash ──';

// Clean geometric logo - the recommended default
export const LOGO = `
    ┌─────────────────────────────────────────────┐
    │                                             │
    │   ╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╸   │
    │                                             │
    │            ◈  e m d a s h  ◈               │
    │                                             │
    │   ╺━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╸   │
    │                                             │
    └─────────────────────────────────────────────┘
`;

// ─────────────────────────────────────────────────────────────────────────────
// Typography & Signature Elements
// ─────────────────────────────────────────────────────────────────────────────

export const EM_DASH = '─';
export const SEPARATOR_WIDTH = 45;
export const SEPARATOR = EM_DASH.repeat(SEPARATOR_WIDTH);
export const SEPARATOR_SHORT = EM_DASH.repeat(20);

/**
 * Create a header with em dash separators.
 *
 * Example: ─── Title ─────────────────────────────
 */
export function header(title: string, width: number = SEPARATOR_WIDTH): string {
  const prefix = `${EM_DASH.repeat(3)} ${title} `;
  const remaining = width - prefix.length;
  return `${prefix}${EM_DASH.repeat(Math.max(0, remaining))}`;
}

/**
 * Create a footer separator.
 */
export function footer(width: number = SEPARATOR_WIDTH): string {
  return EM_DASH.repeat(width);
}

// ─────────────────────────────────────────────────────────────────────────────
// Dot Matrix / Stippled Elements
// ─────────────────────────────────────────────────────────────────────────────

// Spinner frames - dot matrix style, feels computational
export const SPINNER_FRAMES = ['⠿', '⠷', '⠯', '⠟', '⠻', '⠽', '⠾', '⠿'];

// Stippled elements
export const DOT_ACTIVE = '⠿'; // Dense braille - active/processing
export const DOT_WAITING = '∷'; // Stippled - waiting/idle
export const DOT_BULLET = '∷'; // List bullets

// ─────────────────────────────────────────────────────────────────────────────
// Status Indicators
// ─────────────────────────────────────────────────────────────────────────────

export const STATUS_ACTIVE = '▸'; // Active/selected/success
export const STATUS_INACTIVE = '▹'; // Inactive/pending
export const STATUS_ERROR = '■'; // Solid - errors
export const STATUS_INFO = '□'; // Outline - info

// ─────────────────────────────────────────────────────────────────────────────
// Flow & Navigation
// ─────────────────────────────────────────────────────────────────────────────

export const ARROW_PROMPT = '›'; // Prompt/hint indicator
export const ARROW_RIGHT = '»'; // Direction/flow
export const NEST_LINE = '│'; // Vertical nesting

// ─────────────────────────────────────────────────────────────────────────────
// Progress Elements
// ─────────────────────────────────────────────────────────────────────────────

export const PROGRESS_FULL = '█';
export const PROGRESS_PARTIAL = '▓';
export const PROGRESS_EMPTY = '░';

/**
 * Create a progress bar.
 *
 * Example: ████████▓░░░░░░░░░░░  42%
 */
export function progressBar(percent: number, width: number = 20): string {
  const filled = Math.floor(width * percent / 100);
  const partial = (percent % (100 / width)) > (50 / width) && filled < width ? 1 : 0;
  const empty = width - filled - partial;

  const bar =
    PROGRESS_FULL.repeat(filled) +
    PROGRESS_PARTIAL.repeat(partial) +
    PROGRESS_EMPTY.repeat(empty);
  return `${bar}  ${Math.floor(percent)}%`;
}

/**
 * Create a step progress indicator.
 *
 * Example: ∷∷∷∷∷∷∷∷∷∷∷∷∷∷∷∷∷∷∷  step 2 of 4
 */
export function stepProgress(current: number, total: number, width: number = 20): string {
  const dots = DOT_WAITING.repeat(width);
  return `${dots}  step ${current} of ${total}`;
}

// ─────────────────────────────────────────────────────────────────────────────
// Zen Color Palette - Red/Warm Tones
// ─────────────────────────────────────────────────────────────────────────────

export const Colors = {
  // Core semantic colors - warmer, more vibrant
  PRIMARY: '#f0a0a0', // warm rose - main accent
  SECONDARY: '#e8d0a0', // warm sand - secondary
  SUCCESS: '#b8d8a8', // fresh sage - success
  WARNING: '#f0c878', // warm amber - warnings
  ERROR: '#e87878', // vibrant coral - errors

  // Text hierarchy
  TEXT: '#f0f0f0', // bright white
  MUTED: '#c0a8a8', // dusty rose - secondary text
  DIM: '#a09090', // warm gray - hints

  // Accents
  ACCENT: '#d0b0c0', // mauve - highlights
  SUBTLE: '#b8a8a8', // warm fog - disabled
} as const;

// ─────────────────────────────────────────────────────────────────────────────
// ANSI Escape Codes (for raw terminal output)
// ─────────────────────────────────────────────────────────────────────────────

export const ANSI = {
  RESET: '\x1b[0m',
  BOLD: '\x1b[1m',
  DIM: '\x1b[2m',
  ITALIC: '\x1b[3m',

  // Warm zen palette as ANSI (256-color approximations)
  PRIMARY: '\x1b[38;5;217m', // warm rose
  SECONDARY: '\x1b[38;5;223m', // warm sand
  SUCCESS: '\x1b[38;5;150m', // fresh sage
  WARNING: '\x1b[38;5;221m', // warm amber
  ERROR: '\x1b[38;5;203m', // vibrant coral
  MUTED: '\x1b[38;5;181m', // dusty rose
  SHADOW: '\x1b[38;5;138m', // warm gray
} as const;

// ─────────────────────────────────────────────────────────────────────────────
// Component Templates
// ─────────────────────────────────────────────────────────────────────────────

/**
 * Create a framed content block.
 *
 * Example:
 * ─── Title ─────────────────────────────
 *
 *   Content goes here
 *
 * ─────────────────────────────────────────
 */
export function frame(title: string, content: string, width: number = SEPARATOR_WIDTH): string {
  const lines = [header(title, width), '', content, '', footer(width)];
  return lines.join('\n');
}

/**
 * Create a hint bar for menus.
 *
 * Example: › y approve  n feedback  Esc cancel
 */
export function menuHint(...hints: [string, string][]): string {
  const parts = hints.map(([key, action]) => `${key} ${action}`);
  return `${ARROW_PROMPT} ${parts.join('  ')}`;
}

/**
 * Create a bulleted list with stippled bullets.
 *
 * Example:
 *   ∷ First item
 *   ∷ Second item
 */
export function bulletList(items: string[], indent: number = 2): string {
  const prefix = ' '.repeat(indent) + DOT_BULLET + ' ';
  return items.map((item) => `${prefix}${item}`).join('\n');
}

/**
 * Create a nested/indented line with vertical bar.
 *
 * Example:
 *   │ Nested content
 */
export function nestedLine(text: string, indent: number = 2): string {
  return `${' '.repeat(indent)}${NEST_LINE} ${text}`;
}

// ─────────────────────────────────────────────────────────────────────────────
// Chalk-based color helpers
// ─────────────────────────────────────────────────────────────────────────────

import chalk from 'chalk';

export const style = {
  primary: (text: string) => chalk.hex(Colors.PRIMARY)(text),
  secondary: (text: string) => chalk.hex(Colors.SECONDARY)(text),
  success: (text: string) => chalk.hex(Colors.SUCCESS)(text),
  warning: (text: string) => chalk.hex(Colors.WARNING)(text),
  error: (text: string) => chalk.hex(Colors.ERROR)(text),
  text: (text: string) => chalk.hex(Colors.TEXT)(text),
  muted: (text: string) => chalk.hex(Colors.MUTED)(text),
  dim: (text: string) => chalk.hex(Colors.DIM)(text),
  accent: (text: string) => chalk.hex(Colors.ACCENT)(text),
  bold: (text: string) => chalk.bold(text),
  italic: (text: string) => chalk.italic(text),
};
