import { tags as t } from '@lezer/highlight';
import { createTheme } from './theme-helper.mjs';

// ═══════════════════════════════════════════════════════════════════
// PACK HACKLAB · 10 temas: 5 NEÓN sobre negro + 5 estándar
// Mismo formato que neon-madrid.mjs: default = createTheme, settings aparte.
// ═══════════════════════════════════════════════════════════════════

// ── helper: genera un tema neón sobre negro a partir de 3 acentos ──
const neon = ({ base, acento, extra, seleccion }) => ({
  settings: {
    background: '#050507',
    lineBackground: '#05050799',
    foreground: base,
    muted: `${base}40`,
    caret: acento,
    selection: seleccion,
    selectionMatch: `${acento}33`,
    lineHighlight: `${base}0d`,
    gutterBackground: 'transparent',
    gutterForeground: `${base}66`,
  },
  theme: createTheme({
    theme: 'dark',
    settings: {
      background: '#050507',
      lineBackground: '#05050799',
      foreground: base,
      caret: acento,
      selection: seleccion,
      selectionMatch: `${acento}33`,
      lineHighlight: `${base}0d`,
      gutterBackground: 'transparent',
      gutterForeground: `${base}66`,
    },
    styles: [
      { tag: [t.atom, t.bool, t.number], color: extra },
      { tag: t.labelName, color: acento },
      { tag: t.keyword, color: acento },
      { tag: t.operator, color: acento },
      { tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: base },
      { tag: t.definition(t.variableName), color: extra },
      { tag: [t.string, t.special(t.string)], color: extra },
      { tag: t.comment, color: `${base}77` },
      { tag: [t.bracket, t.unit, t.punctuation], color: acento },
      { tag: [t.meta, t.attributeName], color: extra },
      { tag: t.className, color: extra },
      { tag: t.invalid, color: '#ff2222' },
    ],
  }),
});

// ── 5 NEÓN ──────────────────────────────────────────────────────────

// cian eléctrico + magenta
const neonCian_ = neon({ base: '#00e5ff', acento: '#ff00d4', extra: '#7dff00', seleccion: 'rgba(255,0,212,.25)' });
export const neonCianSettings = neonCian_.settings;
export const neonCian = neonCian_.theme;

// magenta/rosa + cian
const neonMagenta_ = neon({ base: '#ff2ec4', acento: '#00e5ff', extra: '#ffe600', seleccion: 'rgba(0,229,255,.25)' });
export const neonMagentaSettings = neonMagenta_.settings;
export const neonMagenta = neonMagenta_.theme;

// verde matrix + lima
const neonVerde_ = neon({ base: '#39ff14', acento: '#00ffc8', extra: '#eaff00', seleccion: 'rgba(0,255,200,.25)' });
export const neonVerdeSettings = neonVerde_.settings;
export const neonVerde = neonVerde_.theme;

// violeta + rosa
const neonVioleta_ = neon({ base: '#b26bff', acento: '#ff4fd8', extra: '#00e5ff', seleccion: 'rgba(255,79,216,.25)' });
export const neonVioletaSettings = neonVioleta_.settings;
export const neonVioleta = neonVioleta_.theme;

// rave multicolor: base ámbar, acentos cian/verde (fiesta total)
const neonRave_ = neon({ base: '#ffb300', acento: '#00e5ff', extra: '#ff2ec4', seleccion: 'rgba(57,255,20,.25)' });
export const neonRaveSettings = neonRave_.settings;
export const neonRave = neonRave_.theme;

// ── 5 ESTÁNDAR ──────────────────────────────────────────────────────

// claro limpio (blanco, azules/teal — para trabajar de día)
export const madridClaroSettings = {
  background: '#ffffff',
  lineBackground: '#ffffff99',
  foreground: '#1e293b',
  muted: '#1e293b26',
  caret: '#0369a1',
  selection: 'rgba(2,132,199,.18)',
  selectionMatch: 'rgba(2,132,199,.12)',
  lineHighlight: 'rgba(2,132,199,.05)',
  gutterBackground: 'transparent',
  gutterForeground: '#1e293b55',
};
export const madridClaro = createTheme({
  theme: 'light',
  settings: madridClaroSettings,
  styles: [
    { tag: [t.atom, t.bool, t.number], color: '#0d9488' },
    { tag: t.labelName, color: '#c026d3' },
    { tag: t.keyword, color: '#7c3aed' },
    { tag: t.operator, color: '#0369a1' },
    { tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#0f172a' },
    { tag: t.definition(t.variableName), color: '#b45309' },
    { tag: [t.string, t.special(t.string)], color: '#15803d' },
    { tag: t.comment, color: '#94a3b8' },
    { tag: [t.bracket, t.unit, t.punctuation], color: '#0369a1' },
    { tag: [t.meta, t.attributeName], color: '#0d9488' },
    { tag: t.className, color: '#b45309' },
    { tag: t.invalid, color: '#dc2626' },
  ],
});

// oscuro neutro (gris carbón, acentos suaves — sobrio)
export const madridOscuroSettings = {
  background: '#1c1e24',
  lineBackground: '#1c1e2499',
  foreground: '#d7dae0',
  muted: '#d7dae026',
  caret: '#61afef',
  selection: 'rgba(97,175,239,.22)',
  selectionMatch: 'rgba(97,175,239,.15)',
  lineHighlight: 'rgba(215,218,224,.05)',
  gutterBackground: 'transparent',
  gutterForeground: '#d7dae055',
};
export const madridOscuro = createTheme({
  theme: 'dark',
  settings: madridOscuroSettings,
  styles: [
    { tag: [t.atom, t.bool, t.number], color: '#d19a66' },
    { tag: t.labelName, color: '#c678dd' },
    { tag: t.keyword, color: '#c678dd' },
    { tag: t.operator, color: '#56b6c2' },
    { tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#e5c07b' },
    { tag: t.definition(t.variableName), color: '#61afef' },
    { tag: [t.string, t.special(t.string)], color: '#98c379' },
    { tag: t.comment, color: '#7f848e' },
    { tag: [t.bracket, t.unit, t.punctuation], color: '#56b6c2' },
    { tag: [t.meta, t.attributeName], color: '#d19a66' },
    { tag: t.className, color: '#e5c07b' },
    { tag: t.invalid, color: '#f14c4c' },
  ],
});

// papel sepia (cálido tipo solarized claro — descansa la vista)
export const papelSepiaSettings = {
  background: '#f5edda',
  lineBackground: '#f5edda99',
  foreground: '#59493a',
  muted: '#59493a26',
  caret: '#b58900',
  selection: 'rgba(181,137,0,.22)',
  selectionMatch: 'rgba(181,137,0,.14)',
  lineHighlight: 'rgba(89,73,58,.06)',
  gutterBackground: 'transparent',
  gutterForeground: '#59493a55',
};
export const papelSepia = createTheme({
  theme: 'light',
  settings: papelSepiaSettings,
  styles: [
    { tag: [t.atom, t.bool, t.number], color: '#b58900' },
    { tag: t.labelName, color: '#d33682' },
    { tag: t.keyword, color: '#859900' },
    { tag: t.operator, color: '#cb4b16' },
    { tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#268bd2' },
    { tag: t.definition(t.variableName), color: '#6c71c4' },
    { tag: [t.string, t.special(t.string)], color: '#2aa198' },
    { tag: t.comment, color: '#9d8f77' },
    { tag: [t.bracket, t.unit, t.punctuation], color: '#cb4b16' },
    { tag: [t.meta, t.attributeName], color: '#b58900' },
    { tag: t.className, color: '#6c71c4' },
    { tag: t.invalid, color: '#dc322f' },
  ],
});

// medianoche (azul profundo — clásico nocturno)
export const medianocheSettings = {
  background: '#0f172a',
  lineBackground: '#0f172a99',
  foreground: '#cbd5e1',
  muted: '#cbd5e126',
  caret: '#38bdf8',
  selection: 'rgba(56,189,248,.22)',
  selectionMatch: 'rgba(56,189,248,.14)',
  lineHighlight: 'rgba(203,213,225,.05)',
  gutterBackground: 'transparent',
  gutterForeground: '#cbd5e155',
};
export const medianoche = createTheme({
  theme: 'dark',
  settings: medianocheSettings,
  styles: [
    { tag: [t.atom, t.bool, t.number], color: '#fbbf24' },
    { tag: t.labelName, color: '#f472b6' },
    { tag: t.keyword, color: '#818cf8' },
    { tag: t.operator, color: '#38bdf8' },
    { tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#7dd3fc' },
    { tag: t.definition(t.variableName), color: '#c4b5fd' },
    { tag: [t.string, t.special(t.string)], color: '#6ee7b7' },
    { tag: t.comment, color: '#64748b' },
    { tag: [t.bracket, t.unit, t.punctuation], color: '#38bdf8' },
    { tag: [t.meta, t.attributeName], color: '#fbbf24' },
    { tag: t.className, color: '#c4b5fd' },
    { tag: t.invalid, color: '#f87171' },
  ],
});

// grafito (monocromo con un solo acento ámbar — minimalista)
export const grafitoSettings = {
  background: '#232323',
  lineBackground: '#23232399',
  foreground: '#c9c9c9',
  muted: '#c9c9c926',
  caret: '#ffb300',
  selection: 'rgba(255,179,0,.22)',
  selectionMatch: 'rgba(255,179,0,.14)',
  lineHighlight: 'rgba(201,201,201,.05)',
  gutterBackground: 'transparent',
  gutterForeground: '#c9c9c955',
};
export const grafito = createTheme({
  theme: 'dark',
  settings: grafitoSettings,
  styles: [
    { tag: [t.atom, t.bool, t.number], color: '#ffb300' },
    { tag: t.labelName, color: '#ffb300' },
    { tag: t.keyword, color: '#e0e0e0' },
    { tag: t.operator, color: '#9e9e9e' },
    { tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#dedede' },
    { tag: t.definition(t.variableName), color: '#ffffff' },
    { tag: [t.string, t.special(t.string)], color: '#ffd54f' },
    { tag: t.comment, color: '#757575' },
    { tag: [t.bracket, t.unit, t.punctuation], color: '#9e9e9e' },
    { tag: [t.meta, t.attributeName], color: '#ffb300' },
    { tag: t.className, color: '#ffffff' },
    { tag: t.invalid, color: '#ff5252' },
  ],
});