/**
 * CSS Variable Constants
 *
 * Centralized CSS variable strings to avoid duplication across components.
 * These are used with inline styles for theme-aware styling.
 */

// =============================================================================
// Text Colors
// =============================================================================

/** Muted text color for less important content */
export const COLOR_TEXT_MUTED = 'var(--color-text-muted)';

/** Secondary text color for supporting content */
export const COLOR_TEXT_SECONDARY = 'var(--color-text-secondary)';

/** Primary text color */
export const COLOR_TEXT = 'var(--color-text)';

// =============================================================================
// Prose/Typography Colors (for markdown rendering)
// =============================================================================

/** Prose body text color */
export const PROSE_BODY = 'var(--prose-body)';

/** Prose heading color */
export const PROSE_HEADING = 'var(--prose-heading)';

/** Prose muted text color */
export const PROSE_MUTED = 'var(--prose-muted)';

/** Prose link color */
export const PROSE_LINK = 'var(--prose-link)';

/** Prose inline code background */
export const PROSE_CODE_BG = 'var(--prose-code-bg)';

/** Prose inline code text color */
export const PROSE_CODE_TEXT = 'var(--prose-code-text)';

/** Prose code block background */
export const PROSE_PRE_BG = 'var(--prose-pre-bg)';

/** Prose code block border */
export const PROSE_PRE_BORDER = 'var(--prose-pre-border)';

/** Prose blockquote border color */
export const PROSE_BLOCKQUOTE_BORDER = 'var(--prose-blockquote-border)';

/** Prose table border color */
export const PROSE_TABLE_BORDER = 'var(--prose-table-border)';

/** Prose table header background */
export const PROSE_TABLE_HEADER_BG = 'var(--prose-table-header-bg)';

// =============================================================================
// Surface Colors
// =============================================================================

/** Raised surface background */
export const COLOR_SURFACE_RAISED = 'var(--color-surface-raised)';

/** Overlay surface background */
export const COLOR_SURFACE_OVERLAY = 'var(--color-surface-overlay)';

/** Base surface background */
export const COLOR_SURFACE = 'var(--color-surface)';

// =============================================================================
// Border Colors
// =============================================================================

/** Standard border color */
export const COLOR_BORDER = 'var(--color-border)';

/** Subtle border color */
export const COLOR_BORDER_SUBTLE = 'var(--color-border-subtle)';

// =============================================================================
// Tool Item Colors (for expandable items in chat)
// =============================================================================

/** Tool item muted color */
export const TOOL_ITEM_MUTED = 'var(--tool-item-muted)';

// =============================================================================
// Code Block Colors
// =============================================================================

/** Code block background */
export const CODE_BG = 'var(--code-bg)';

/** Code block border */
export const CODE_BORDER = 'var(--code-border)';

/** Code block header background */
export const CODE_HEADER_BG = 'var(--code-header-bg)';

/** Code filename color */
export const CODE_FILENAME = 'var(--code-filename)';

/** Code line number color */
export const CODE_LINE_NUMBER = 'var(--code-line-number)';

// =============================================================================
// Diff Colors
// =============================================================================

/** Diff removed line background */
export const DIFF_REMOVED_BG = 'var(--diff-removed-bg)';

/** Diff removed line text color */
export const DIFF_REMOVED_TEXT = 'var(--diff-removed-text)';

/** Diff removed line border */
export const DIFF_REMOVED_BORDER = 'var(--diff-removed-border)';

/** Diff added line background */
export const DIFF_ADDED_BG = 'var(--diff-added-bg)';

/** Diff added line text color */
export const DIFF_ADDED_TEXT = 'var(--diff-added-text)';

/** Diff added line border */
export const DIFF_ADDED_BORDER = 'var(--diff-added-border)';

// =============================================================================
// Tool Call/Result Colors
// =============================================================================

/** Tool call background */
export const TOOL_CALL_BG = 'var(--tool-call-bg)';

/** Tool call border */
export const TOOL_CALL_BORDER = 'var(--tool-call-border)';

/** Tool call text color */
export const TOOL_CALL_TEXT = 'var(--tool-call-text)';

// =============================================================================
// Tag/Badge Colors
// =============================================================================

/** Tag background */
export const TAG_BG = 'var(--tag-bg)';

/** Tag text color */
export const TAG_TEXT = 'var(--tag-text)';

/** Tag border */
export const TAG_BORDER = 'var(--tag-border)';

// =============================================================================
// Worktree Badge Colors (hardcoded hex values)
// =============================================================================

/** Muted zinc badge background */
export const WORKTREE_BADGE_BG = 'rgba(161, 161, 170, 0.15)';

/** Muted zinc badge text color */
export const WORKTREE_BADGE_TEXT = '#a1a1aa';

// =============================================================================
// Card/Subagent Styling (theme-aware)
// =============================================================================

/** Card background */
export const CARD_BG = 'var(--card-bg)';

/** Card background — zebra-striped alternate row */
export const CARD_BG_ZEBRA = 'var(--card-bg-zebra)';

/** Card border color */
const CARD_BORDER = 'var(--card-border)';

/** Card border style */
export const CARD_BORDER_STYLE = `1px solid ${CARD_BORDER}`;

/** Card header background */
export const CARD_HEADER_BG = 'var(--card-header-bg)';

/** Card header hover background */
export const CARD_HEADER_HOVER = 'var(--card-header-hover)';

/** Card muted icon color */
export const CARD_ICON_MUTED = 'var(--card-icon-muted)';

/** Card light text */
export const CARD_TEXT_LIGHT = 'var(--card-text-light)';

/** Card lighter text */
export const CARD_TEXT_LIGHTER = 'var(--card-text-lighter)';

/** Card separator color */
export const CARD_SEPARATOR = 'var(--card-separator)';

// =============================================================================
// Form/Input Colors (Tailwind classes for select/input options)
// =============================================================================

/** Background for select options (theme-aware) */
export const SELECT_OPTION_BG = 'bg-surface';

// =============================================================================
// Form State Classes (Tailwind classes for form states)
// =============================================================================

/** Cursor pointer class */
const CURSOR_POINTER = 'cursor-pointer';

/** Cursor not allowed with opacity for disabled state */
const CURSOR_DISABLED = 'cursor-not-allowed opacity-50';

/**
 * Helper to get cursor class based on disabled state
 */
export const getCursorClass = (disabled: boolean): string =>
  disabled ? CURSOR_DISABLED : CURSOR_POINTER;

/**
 * Base className for select inputs in settings forms (theme-aware)
 */
export const SELECT_INPUT_BASE =
  'rounded border border-border bg-transparent px-2 py-1 text-sm text-text focus:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-500';