// themes.jsx — three aesthetic directions for the Correx TUI.
// Each theme is a set of CSS variables + a `chrome` mode that changes how
// panels render. Palette accent is independently swappable.

const ACCENTS = {
  cyan:    { accent: "#56c8d8", accent2: "#7aa2f7", glow: "86 200 216" },
  amber:   { accent: "#e8b765", accent2: "#d98a5b", glow: "232 183 101" },
  green:   { accent: "#8fd96a", accent2: "#5dd1a0", glow: "143 217 106" },
  magenta: { accent: "#c98fd9", accent2: "#d98ab0", glow: "201 143 217" },
  neutral: { accent: "#b9c0c9", accent2: "#8a929c", glow: "185 192 201" },
};

const THEMES = {
  // 1. Boxed — lazygit / k9s. Sharp single-line borders, numbered panels,
  // active panel highlighted, cool slate ground.
  boxed: {
    label: "Boxed",
    blurb: "lazygit · k9s",
    chrome: "boxed",
    defaultAccent: "cyan",
    vars: {
      "--bg": "#0b0f14",
      "--bg-deep": "#070a0e",
      "--panel": "#0e141b",
      "--panel-2": "#111922",
      "--fg": "#c6d0da",
      "--fg-strong": "#eef3f8",
      "--dim": "#5b6873",
      "--faint": "#36424d",
      "--border": "#1d2935",
      "--border-active": "var(--accent)",
      "--sel": "#16222e",
      "--radius": "0px",
      "--panel-pad": "0px",
      "--gap": "6px",
      "--font": "'JetBrains Mono','SF Mono',ui-monospace,monospace",
      "--line": "1.45",
      "--ok": "#7fd88f",
      "--warn": "#e8c06a",
      "--bad": "#e87f7f",
    },
  },

  // 2. Soft — Charm / Bubble Tea. Rounded panels, generous padding, gentle
  // separators. Neutral charcoal ground so the look isn't tinted — warmth
  // lives only in the (swappable) accent.
  soft: {
    label: "Soft",
    blurb: "charm · bubbletea",
    chrome: "soft",
    defaultAccent: "amber",
    vars: {
      "--bg": "#14161a",
      "--bg-deep": "#0f1115",
      "--panel": "#181b21",
      "--panel-2": "#1f232b",
      "--fg": "#ced3da",
      "--fg-strong": "#eef1f5",
      "--dim": "#838b96",
      "--faint": "#434a55",
      "--border": "#262b33",
      "--border-active": "var(--accent)",
      "--sel": "#21262e",
      "--radius": "10px",
      "--panel-pad": "4px",
      "--gap": "10px",
      "--font": "'JetBrains Mono','SF Mono',ui-monospace,monospace",
      "--line": "1.6",
      "--ok": "#86d39a",
      "--warn": "#e8b765",
      "--bad": "#e3938a",
    },
  },

  // 3. Bare — classic monochrome phosphor. Almost no chrome: thin rules,
  // whitespace, green-on-black. Minimal, fast, text-forward.
  bare: {
    label: "Bare",
    blurb: "classic phosphor",
    chrome: "bare",
    defaultAccent: "green",
    vars: {
      "--bg": "#080b08",
      "--bg-deep": "#050705",
      "--panel": "#080b08",
      "--panel-2": "#0b100b",
      "--fg": "#a7c99a",
      "--fg-strong": "#e6f6df",
      "--dim": "#5a7050",
      "--faint": "#2f3d2b",
      "--border": "#1a241799",
      "--border-active": "var(--accent)",
      "--sel": "#12200f",
      "--radius": "0px",
      "--panel-pad": "0px",
      "--gap": "2px",
      "--font": "'JetBrains Mono','SF Mono',ui-monospace,monospace",
      "--line": "1.55",
      "--ok": "#8fd96a",
      "--warn": "#cbd96a",
      "--bad": "#d98a8a",
    },
  },
};

function applyTheme(el, themeKey, accentKey) {
  const th = THEMES[themeKey] || THEMES.boxed;
  const acc = ACCENTS[accentKey] || ACCENTS[th.defaultAccent];
  const vars = { ...th.vars, "--accent": acc.accent, "--accent-2": acc.accent2, "--glow": acc.glow };
  for (const [k, v] of Object.entries(vars)) el.style.setProperty(k, v);
  el.setAttribute("data-chrome", th.chrome);
}

window.CORREX_THEMES = { THEMES, ACCENTS, applyTheme };