// src/shared/theme-vars.ts
// 팝업 윈도우용 CSS 변수 맵.
// main process (WindowManager)에서 insertCSS로 팝업에 테마를 주입할 때 사용.
// renderer의 theme.ts RAW와 동기화 유지 필요.
// Node.js/Electron main 환경에서 import 가능 (DOM API 없음).

export type PopupThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'

interface PopupThemeVars {
  /** 카드 배경 (팝업 본체) */
  '--d3-bg-card': string
  /** 앱 배경 (recording-tip 반투명 배경) */
  '--d3-bg-tip': string
  /** 주요 텍스트 */
  '--d3-text-primary': string
  /** 보조 텍스트 */
  '--d3-text-secondary': string
  /** 비활성 텍스트 (번호, 시간 등) */
  '--d3-text-inactive': string
  /** 힌트/최약 텍스트 */
  '--d3-text-muted': string
  /** dimLabel 텍스트 (command-popup 제목) */
  '--d3-text-dimLabel': string
  /** 기본 테두리 */
  '--d3-border-default': string
  /** 미묘한 테두리 (구분선, hover) */
  '--d3-border-subtle': string
  /** 강한 테두리 (progress background) */
  '--d3-border-strong': string
  /** 악센트 색상 (웨이브바, 선택 바) */
  '--d3-accent-main': string
  /** 악센트 dim (active 배경) */
  '--d3-accent-dim': string
  /** 팝업 박스 섀도 */
  '--d3-shadow-popup': string
  /** 결과 팝업 배경 (불투명) */
  '--d3-bg-result': string
  /** 결과 팝업 테두리 */
  '--d3-border-result': string
  /** 결과 팝업 텍스트 */
  '--d3-text-result': string
  /** 결과 팝업 버튼 색상 */
  '--d3-action-btn': string
  /** 결과 팝업 버튼 hover 배경 */
  '--d3-action-btn-hover-bg': string
  /** 결과 팝업 버튼 hover 색상 */
  '--d3-action-btn-hover': string
  /** recording-tip 9단계 wave-bar 색상 (wave1~4 보간) */
  '--d3-wave-1': string
  '--d3-wave-2': string
  '--d3-wave-3': string
  '--d3-wave-4': string
  '--d3-wave-5': string
  '--d3-wave-6': string
  '--d3-wave-7': string
  '--d3-wave-8': string
  '--d3-wave-9': string
  /** 에러 상태 색상 (recording-tip error-icon) */
  '--d3-status-error': string
  /** 성공 상태 색상 (result-popup copied 상태) */
  '--d3-status-success': string
}

const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
  dark: {
    '--d3-bg-card': '#111a30',
    '--d3-bg-tip': 'rgba(10,14,28,0.85)',
    '--d3-text-primary': '#eef2fb',
    '--d3-text-secondary': '#93a4c8',
    '--d3-text-inactive': '#7385ab',
    '--d3-text-muted': '#2b3550',
    '--d3-text-dimLabel': '#4e5f85',
    '--d3-border-default': 'rgba(148,180,255,0.12)',
    '--d3-border-subtle': 'rgba(148,180,255,0.07)',
    '--d3-border-strong': 'rgba(148,180,255,0.20)',
    '--d3-accent-main': '#3b82f6',
    '--d3-accent-dim': 'rgba(59,130,246,0.14)',
    '--d3-shadow-popup': '0 8px 32px rgba(3,7,18,0.5)',
    '--d3-bg-result': '#111a30',
    '--d3-border-result': 'rgba(148,180,255,0.12)',
    '--d3-text-result': '#eef2fb',
    '--d3-action-btn': '#60a5fa',
    '--d3-action-btn-hover-bg': 'rgba(59,130,246,0.14)',
    '--d3-action-btn-hover': '#93a4c8',
    // wave-bar 9단계: theme.ts RAW.dark.gradient.wave1-4 보간
    '--d3-wave-1': '#93c5fd',
    '--d3-wave-2': '#60a5fa',
    '--d3-wave-3': '#4f8dfa',
    '--d3-wave-4': '#3b82f6',
    '--d3-wave-5': '#3b82f6',
    '--d3-wave-6': '#5b75f7',
    '--d3-wave-7': '#6e71f7',
    '--d3-wave-8': '#818cf8',
    '--d3-wave-9': '#a78bfa',
    '--d3-status-error': '#ef4444',
    '--d3-status-success': '#10b981',
  },
  light: {
    '--d3-bg-card': '#ffffff',
    '--d3-bg-tip': 'rgba(242,245,251,0.92)',
    '--d3-text-primary': '#111827',
    '--d3-text-secondary': '#4b5a75',
    '--d3-text-inactive': '#8593ab',
    '--d3-text-muted': '#c3cddd',
    '--d3-text-dimLabel': '#5a6f96',
    '--d3-border-default': 'rgba(30,58,138,0.12)',
    '--d3-border-subtle': 'rgba(30,58,138,0.07)',
    '--d3-border-strong': 'rgba(30,58,138,0.20)',
    '--d3-accent-main': '#2563eb',
    '--d3-accent-dim': 'rgba(37,99,235,0.10)',
    '--d3-shadow-popup': '0 8px 32px rgba(30,58,138,0.12)',
    '--d3-bg-result': '#ffffff',
    '--d3-border-result': 'rgba(30,58,138,0.12)',
    '--d3-text-result': '#111827',
    '--d3-action-btn': '#3b82f6',
    '--d3-action-btn-hover-bg': 'rgba(37,99,235,0.10)',
    '--d3-action-btn-hover': '#4b5a75',
    // theme.ts RAW.light.gradient.wave1-4 보간
    '--d3-wave-1': '#06b6d4',
    '--d3-wave-2': '#1cbff8',
    '--d3-wave-3': '#32bbfc',
    '--d3-wave-4': '#3b82f6',
    '--d3-wave-5': '#4966eb',
    '--d3-wave-6': '#574ae0',
    '--d3-wave-7': '#6c2edd',
    '--d3-wave-8': '#8112da',
    '--d3-wave-9': '#d946ef',
    '--d3-status-error': '#ef4444',
    '--d3-status-success': '#34d399',
  },
  nord: {
    '--d3-bg-card': '#3b4252',
    '--d3-bg-tip': 'rgba(46,52,64,0.92)',
    '--d3-text-primary': 'rgba(236,239,244,0.87)',
    '--d3-text-secondary': 'rgba(216,222,233,0.6)',
    '--d3-text-inactive': 'rgba(216,222,233,0.35)',
    '--d3-text-muted': 'rgba(216,222,233,0.25)',
    '--d3-text-dimLabel': '#5e81ac',
    '--d3-border-default': 'rgba(216,222,233,0.10)',
    '--d3-border-subtle': 'rgba(216,222,233,0.06)',
    '--d3-border-strong': 'rgba(216,222,233,0.16)',
    '--d3-accent-main': '#88c0d0',
    '--d3-accent-dim': 'rgba(136,192,208,0.08)',
    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
    '--d3-bg-result': '#434c5e',
    '--d3-border-result': 'rgba(216,222,233,0.10)',
    '--d3-text-result': 'rgba(236,239,244,0.87)',
    '--d3-action-btn': 'rgba(216,222,233,0.4)',
    '--d3-action-btn-hover-bg': 'rgba(216,222,233,0.08)',
    '--d3-action-btn-hover': 'rgba(216,222,233,0.7)',
    // theme.ts RAW.nord.gradient.wave1-4 보간
    '--d3-wave-1': '#8fbcbb',
    '--d3-wave-2': '#8dbdcd',
    '--d3-wave-3': '#8bbea0',
    '--d3-wave-4': '#88c0d0',
    '--d3-wave-5': '#85c6d0',
    '--d3-wave-6': '#a3be8c',
    '--d3-wave-7': '#b48ead',
    '--d3-wave-8': '#bf88a8',
    '--d3-wave-9': '#d08770',
    '--d3-status-error': '#bf616a',
    '--d3-status-success': '#a3be8c',
  },
  solarized: {
    '--d3-bg-card': '#073642',
    '--d3-bg-tip': 'rgba(0,43,54,0.92)',
    '--d3-text-primary': 'rgba(238,232,213,0.87)',
    '--d3-text-secondary': 'rgba(147,161,161,0.7)',
    '--d3-text-inactive': 'rgba(147,161,161,0.4)',
    '--d3-text-muted': 'rgba(147,161,161,0.25)',
    '--d3-text-dimLabel': '#7a6c2e',
    '--d3-border-default': 'rgba(131,148,150,0.13)',
    '--d3-border-subtle': 'rgba(131,148,150,0.08)',
    '--d3-border-strong': 'rgba(131,148,150,0.20)',
    '--d3-accent-main': '#b58900',
    '--d3-accent-dim': 'rgba(181,137,0,0.08)',
    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
    '--d3-bg-result': '#0d4250',
    '--d3-border-result': 'rgba(131,148,150,0.13)',
    '--d3-text-result': 'rgba(238,232,213,0.87)',
    '--d3-action-btn': 'rgba(147,161,161,0.4)',
    '--d3-action-btn-hover-bg': 'rgba(131,148,150,0.10)',
    '--d3-action-btn-hover': 'rgba(147,161,161,0.7)',
    // theme.ts RAW.solarized.gradient.wave1-4 보간
    '--d3-wave-1': '#2aa198',
    '--d3-wave-2': '#2693cb',
    '--d3-wave-3': '#268bd2',
    '--d3-wave-4': '#268bd2',
    '--d3-wave-5': '#4676d9',
    '--d3-wave-6': '#6c71c4',
    '--d3-wave-7': '#6c71c4',
    '--d3-wave-8': '#9a33d3',
    '--d3-wave-9': '#d33682',
    '--d3-status-error': '#dc322f',
    '--d3-status-success': '#859900',
  },
  catppuccin: {
    '--d3-bg-card': '#313244',
    '--d3-bg-tip': 'rgba(30,30,46,0.92)',
    '--d3-text-primary': 'rgba(205,214,244,0.87)',
    '--d3-text-secondary': 'rgba(186,194,222,0.7)',
    '--d3-text-inactive': 'rgba(166,173,200,0.4)',
    '--d3-text-muted': 'rgba(166,173,200,0.25)',
    '--d3-text-dimLabel': '#585b70',
    '--d3-border-default': 'rgba(205,214,244,0.08)',
    '--d3-border-subtle': 'rgba(205,214,244,0.04)',
    '--d3-border-strong': 'rgba(205,214,244,0.14)',
    '--d3-accent-main': '#cba6f7',
    '--d3-accent-dim': 'rgba(203,166,247,0.08)',
    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
    '--d3-bg-result': '#3a3a54',
    '--d3-border-result': 'rgba(205,214,244,0.08)',
    '--d3-text-result': 'rgba(205,214,244,0.87)',
    '--d3-action-btn': 'rgba(166,173,200,0.4)',
    '--d3-action-btn-hover-bg': 'rgba(205,214,244,0.06)',
    '--d3-action-btn-hover': 'rgba(205,214,244,0.7)',
    // theme.ts RAW.catppuccin.gradient.wave1-4 보간
    '--d3-wave-1': '#89dceb',
    '--d3-wave-2': '#89cff4',
    '--d3-wave-3': '#89c2f9',
    '--d3-wave-4': '#89b4fa',
    '--d3-wave-5': '#b4a9f2',
    '--d3-wave-6': '#df9eea',
    '--d3-wave-7': '#cba6f7',
    '--d3-wave-8': '#e5b6f6',
    '--d3-wave-9': '#f5c2e7',
    '--d3-status-error': '#f38ba8',
    '--d3-status-success': '#a6e3a1',
  },
  dracula: {
    '--d3-bg-card': '#44475a',
    '--d3-bg-tip': 'rgba(40,42,54,0.92)',
    '--d3-text-primary': 'rgba(248,248,242,0.87)',
    '--d3-text-secondary': 'rgba(169,176,208,0.7)',
    '--d3-text-inactive': 'rgba(169,176,208,0.4)',
    '--d3-text-muted': 'rgba(169,176,208,0.25)',
    '--d3-text-dimLabel': '#6272a4',
    '--d3-border-default': 'rgba(248,248,242,0.08)',
    '--d3-border-subtle': 'rgba(248,248,242,0.04)',
    '--d3-border-strong': 'rgba(248,248,242,0.14)',
    '--d3-accent-main': '#bd93f9',
    '--d3-accent-dim': 'rgba(189,147,249,0.08)',
    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
    '--d3-bg-result': '#4f5266',
    '--d3-border-result': 'rgba(248,248,242,0.08)',
    '--d3-text-result': 'rgba(248,248,242,0.87)',
    '--d3-action-btn': 'rgba(169,176,208,0.4)',
    '--d3-action-btn-hover-bg': 'rgba(248,248,242,0.06)',
    '--d3-action-btn-hover': 'rgba(248,248,242,0.7)',
    // theme.ts RAW.dracula.gradient.wave1-4 보간
    '--d3-wave-1': '#8be9fd',
    '--d3-wave-2': '#a6fbff',
    '--d3-wave-3': '#c1fdff',
    '--d3-wave-4': '#bd93f9',
    '--d3-wave-5': '#d485ff',
    '--d3-wave-6': '#eb77ff',
    '--d3-wave-7': '#ff79c6',
    '--d3-wave-8': '#ff88c4',
    '--d3-wave-9': '#ffb86c',
    '--d3-status-error': '#ff5555',
    '--d3-status-success': '#50fa7b',
  },
}

/**
 * 팝업용 CSS 변수 맵 조회.
 * ThemeMode('system' | 'light' | 'dark') 또는 테마 키를 받아 해당 변수 맵 반환.
 * 'system' 또는 알 수 없는 값은 'dark'로 폴백.
 */
export function getPopupThemeVars(themeKey: string): PopupThemeVars {
  const key = themeKey as PopupThemeKey
  return POPUP_THEME_VARS[key] ?? POPUP_THEME_VARS.dark
}

/**
 * 팝업 BrowserWindow에 insertCSS로 주입할 CSS 문자열 반환.
 * `:root { --d3-bg-card: #242427; ... }`
 */
export function buildPopupThemeCss(themeKey: string): string {
  const vars = getPopupThemeVars(themeKey)
  const declarations = Object.entries(vars)
    .map(([prop, value]) => `  ${prop}: ${value};`)
    .join('\n')
  return `:root {\n${declarations}\n}`
}