import type { AnsiColorName } from '@simon_he/vue-tui'
import type { UiTheme, UiTokens } from './ui-theme'

// ---------------------------------------------------------------------------
// Shared dark token layout — identical across all dark themes.
// Only the palette256 differs per theme.
// ---------------------------------------------------------------------------

const DARK_256: UiTokens = Object.freeze({
  'bg.window': { bg: 'black' },
  'bg.chrome': { bg: 'blackBright' },
  'border.default': { fg: 'blue', dim: true },
  'text.primary': { fg: 'white' },
  'text.muted': { fg: 'white', dim: true },
  'text.faint': { fg: 'white', dim: true },
  'accent.cyan': { fg: 'cyanBright', bold: true },
  'accent.purple': { fg: 'magentaBright', bold: true },
  'status.success': { fg: 'greenBright', bold: true },
  'status.warning': { fg: 'yellowBright', bold: true },
  'status.danger': { fg: 'redBright', bold: true },
  'select.item': { fg: 'black', bg: 'cyanBright', bold: true },
  'select.text': { fg: 'black', bg: 'magentaBright' },
  'focus.ring': { fg: 'cyanBright' },
  'code.inline': { fg: 'yellowBright' },
  'code.block.header': { fg: 'blueBright', bg: 'blackBright' },
  'code.block.body': { fg: 'white', bg: 'blackBright' },
  'diff.add': { fg: 'greenBright' },
  'diff.del': { fg: 'redBright' },
  'diff.hunk': { fg: 'cyanBright' },
  'diff.add.line': { bg: 'green' },
  'diff.del.line': { bg: 'red' },
  'dialog.chrome': { fg: 'blueBright', bg: 'blackBright' },
  'dialog.body': { bg: 'black' },
  'input.field': { fg: 'white', bg: 'blackBright' },
  'chip.plan': { fg: 'black', bg: 'magentaBright', bold: true },
  'chip.agent': { fg: 'black', bg: 'greenBright', bold: true },
  'chip.meta': { fg: 'blueBright', bg: 'blackBright', bold: true },
})

const DARK_16: UiTokens = Object.freeze({
  'bg.window': { bg: 'black' },
  'bg.chrome': { bg: 'blackBright' },
  'border.default': { fg: 'blue', dim: true },
  'text.primary': { fg: 'white' },
  'text.muted': { fg: 'white', dim: true },
  'text.faint': { fg: 'white', dim: true },
  'accent.cyan': { fg: 'cyanBright', bold: true },
  'accent.purple': { fg: 'magentaBright', bold: true },
  'status.success': { fg: 'greenBright', bold: true },
  'status.warning': { fg: 'yellowBright', bold: true },
  'status.danger': { fg: 'redBright', bold: true },
  'select.item': { inverse: true, bold: true },
  'select.text': { inverse: true },
  'focus.ring': { fg: 'cyanBright' },
  'code.inline': { fg: 'yellowBright' },
  'code.block.header': { fg: 'white', dim: true },
  'code.block.body': { fg: 'white' },
  'diff.add': { fg: 'greenBright' },
  'diff.del': { fg: 'redBright' },
  'diff.hunk': { fg: 'cyanBright' },
  'diff.add.line': { bg: 'green' },
  'diff.del.line': { bg: 'red' },
  'dialog.chrome': { fg: 'blueBright', bg: 'blackBright' },
  'dialog.body': { bg: 'black' },
  'input.field': { fg: 'white', bg: 'blackBright' },
  'chip.plan': { fg: 'black', bg: 'magentaBright', bold: true },
  'chip.agent': { fg: 'black', bg: 'greenBright', bold: true },
  'chip.meta': { fg: 'blueBright', bg: 'blackBright', bold: true },
})

const DARK_8: UiTokens = Object.freeze({
  'bg.window': { bg: 'black' },
  'bg.chrome': { bg: 'blackBright' },
  'border.default': { dim: true },
  'text.primary': { fg: 'white' },
  'text.muted': { fg: 'white', dim: true },
  'text.faint': { fg: 'white', dim: true },
  'accent.cyan': { fg: 'cyan', bold: true },
  'accent.purple': { fg: 'magenta', bold: true },
  'status.success': { fg: 'green', bold: true },
  'status.warning': { fg: 'yellow', bold: true },
  'status.danger': { fg: 'red', bold: true },
  'select.item': { inverse: true, bold: true },
  'select.text': { inverse: true },
  'focus.ring': { fg: 'cyan' },
  'code.inline': { fg: 'yellow' },
  'code.block.header': { dim: true },
  'code.block.body': {},
  'diff.add': { fg: 'green' },
  'diff.del': { fg: 'red' },
  'diff.hunk': { fg: 'cyan' },
  'diff.add.line': { bg: 'green' },
  'diff.del.line': { bg: 'red' },
  'dialog.chrome': { fg: 'blue' },
  'dialog.body': {},
  'input.field': {},
  'chip.plan': { inverse: true, bold: true },
  'chip.agent': { inverse: true, bold: true },
  'chip.meta': { dim: true },
})

const DARK_TOKENS = Object.freeze({ 256: DARK_256, 16: DARK_16, 8: DARK_8 })

// ---------------------------------------------------------------------------
// Shared light token layout
// ---------------------------------------------------------------------------

const LIGHT_256: UiTokens = Object.freeze({
  'bg.window': { bg: 'white' },
  'bg.chrome': { bg: 'blackBright' },
  'border.default': { fg: 'blue' },
  'text.primary': { fg: 'black' },
  'text.muted': { fg: 'blueBright' },
  'text.faint': { fg: 'blue' },
  'accent.cyan': { fg: 'cyanBright', bold: true },
  'accent.purple': { fg: 'magentaBright', bold: true },
  'status.success': { fg: 'greenBright', bold: true },
  'status.warning': { fg: 'yellowBright', bold: true },
  'status.danger': { fg: 'redBright', bold: true },
  'select.item': { fg: 'white', bg: 'cyanBright', bold: true },
  'select.text': { fg: 'white', bg: 'magentaBright' },
  'focus.ring': { fg: 'cyanBright' },
  'code.inline': { fg: 'magentaBright' },
  'code.block.header': { fg: 'blueBright', bg: 'blackBright' },
  'code.block.body': { fg: 'black', bg: 'blackBright' },
  'diff.add': { fg: 'greenBright' },
  'diff.del': { fg: 'redBright' },
  'diff.hunk': { fg: 'cyanBright' },
  'diff.add.line': { bg: 'green' },
  'diff.del.line': { bg: 'red' },
  'dialog.chrome': { fg: 'blueBright', bg: 'blackBright' },
  'dialog.body': { bg: 'white' },
  'input.field': { fg: 'black', bg: 'blackBright' },
  'chip.plan': { fg: 'white', bg: 'magentaBright', bold: true },
  'chip.agent': { fg: 'white', bg: 'greenBright', bold: true },
  'chip.meta': { fg: 'blueBright', bg: 'blackBright', bold: true },
})

const LIGHT_16: UiTokens = Object.freeze({
  'bg.window': { bg: 'white' },
  'bg.chrome': { bg: 'blackBright' },
  'border.default': { fg: 'blue' },
  'text.primary': { fg: 'black' },
  'text.muted': { fg: 'blueBright' },
  'text.faint': { fg: 'blueBright', dim: true },
  'accent.cyan': { fg: 'cyanBright', bold: true },
  'accent.purple': { fg: 'magentaBright', bold: true },
  'status.success': { fg: 'greenBright', bold: true },
  'status.warning': { fg: 'yellowBright', bold: true },
  'status.danger': { fg: 'redBright', bold: true },
  'select.item': { inverse: true, bold: true },
  'select.text': { inverse: true },
  'focus.ring': { fg: 'cyanBright' },
  'code.inline': { fg: 'magentaBright' },
  'code.block.header': { fg: 'blueBright' },
  'code.block.body': { fg: 'black' },
  'diff.add': { fg: 'greenBright' },
  'diff.del': { fg: 'redBright' },
  'diff.hunk': { fg: 'cyanBright' },
  'diff.add.line': { bg: 'green' },
  'diff.del.line': { bg: 'red' },
  'dialog.chrome': { fg: 'blueBright', bg: 'blackBright' },
  'dialog.body': { bg: 'white' },
  'input.field': { fg: 'black', bg: 'blackBright' },
  'chip.plan': { inverse: true, bold: true },
  'chip.agent': { inverse: true, bold: true },
  'chip.meta': { dim: true },
})

const LIGHT_8: UiTokens = Object.freeze({
  'bg.window': { bg: 'white' },
  'bg.chrome': { bg: 'blackBright' },
  'border.default': { dim: true },
  'text.primary': { fg: 'black' },
  'text.muted': { fg: 'black', dim: true },
  'text.faint': { fg: 'black', dim: true },
  'accent.cyan': { fg: 'cyan', bold: true },
  'accent.purple': { fg: 'magenta', bold: true },
  'status.success': { fg: 'green', bold: true },
  'status.warning': { fg: 'yellow', bold: true },
  'status.danger': { fg: 'red', bold: true },
  'select.item': { inverse: true, bold: true },
  'select.text': { inverse: true },
  'focus.ring': { fg: 'cyan' },
  'code.inline': { fg: 'magenta' },
  'code.block.header': { dim: true },
  'code.block.body': {},
  'diff.add': { fg: 'green' },
  'diff.del': { fg: 'red' },
  'diff.hunk': { fg: 'cyan' },
  'diff.add.line': { bg: 'green' },
  'diff.del.line': { bg: 'red' },
  'dialog.chrome': { fg: 'blue' },
  'dialog.body': {},
  'input.field': { inverse: true },
  'chip.plan': { inverse: true, bold: true },
  'chip.agent': { inverse: true, bold: true },
  'chip.meta': { dim: true },
})

const LIGHT_TOKENS = Object.freeze({ 256: LIGHT_256, 16: LIGHT_16, 8: LIGHT_8 })

export function makeDarkTheme(
  palette: Partial<Record<AnsiColorName, string>>,
): UiTheme {
  return Object.freeze({ palette256: palette, tokensByLevel: DARK_TOKENS })
}

export function makeLightTheme(
  palette: Partial<Record<AnsiColorName, string>>,
): UiTheme {
  return Object.freeze({ palette256: palette, tokensByLevel: LIGHT_TOKENS })
}
