/* global React */

// CSS-variable theme overrides. Wrap an artboard child in <Themed themeKey="..." />
// and the InvestigationScreen inherits the new tokens via the cascade.

const VARIANT_THEMES = {
  vellum: {
    label: 'Vellum - most minimal',
    sub: 'Hairlines and ink only. Color appears solely on actively-pinned evidence.',
    vars: {
      '--parchment':    '#F3EEE2',
      '--parchment-2':  '#F3EEE2',
      '--parchment-3':  '#E8E1CD',
      '--paper':        '#F7F3E9',
      '--rule':         'rgba(27,34,56,0.06)',
      '--rule-soft':    'rgba(27,34,56,0.03)',
      '--brick':        '#1B2238',
      '--mustard':      '#1B2238',
      '--teal':         '#1B2238',
      '--plum':         '#5C4763',
      '--brick-soft':   'rgba(27,34,56,0.18)',
      '--mustard-soft': 'rgba(27,34,56,0.18)',
      '--teal-soft':    'rgba(27,34,56,0.18)',
      '--plum-soft':    'rgba(92,71,99,0.30)',
      '--brick-wash':   '#F3EEE2',
      '--mustard-wash': '#F3EEE2',
      '--teal-wash':    '#F3EEE2',
      '--plum-wash':    '#EBE2EE',
      '--wax-wash':     '#EFD5CD',
    },
  },

  bold: {
    label: 'Bold pastels',
    sub: 'Saturated palette. Color blocks carry the structure rather than rules.',
    vars: {
      '--parchment':    '#EFE5CC',
      '--parchment-2':  '#E2D2A8',
      '--parchment-3':  '#CFBA82',
      '--paper':        '#F9F1D8',
      '--brick':        '#A03326',
      '--brick-soft':   '#D08071',
      '--brick-wash':   '#E89F8E',
      '--mustard':      '#9A7110',
      '--mustard-soft': '#D9B548',
      '--mustard-wash': '#EBC85B',
      '--teal':         '#306E6C',
      '--teal-soft':    '#7DB1AF',
      '--teal-wash':    '#A0CCCA',
      '--plum':         '#664072',
      '--plum-soft':    '#A988B0',
      '--plum-wash':    '#C9A8D0',
      '--wax':          '#7A1A0D',
      '--wax-soft':     '#B65A4D',
      '--wax-wash':     '#D9897C',
    },
  },

  evening: {
    label: 'Evening study',
    sub: 'Candle-lit library. Restrained ink, no monospace - the voice is human, not terminal.',
    vars: {
      // override mono so it reads as a humanist sans, not a terminal
      '--mono':         "'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      '--parchment':    '#22243A',
      '--parchment-2':  '#1B1D31',
      '--parchment-3':  '#15172A',
      '--paper':        '#272A42',
      '--ink':          '#EFE7D2',
      '--ink-soft':     '#BDB6A2',
      '--ink-mute':     '#807A8C',
      '--ink-faint':    '#4F4B66',
      '--ink-ghost':    '#33304A',
      '--rule':         'rgba(239,231,210,0.07)',
      '--rule-soft':    'rgba(239,231,210,0.035)',
      '--brick':        '#C9826F',
      '--brick-soft':   '#5C3328',
      '--brick-wash':   '#2E1A16',
      '--mustard':      '#C9A86A',
      '--mustard-soft': '#5C4A28',
      '--mustard-wash': '#2E2614',
      '--teal':         '#8AA9A6',
      '--teal-soft':    '#39504F',
      '--teal-wash':    '#1B2627',
      '--plum':         '#9F8AA6',
      '--plum-soft':    '#463854',
      '--plum-wash':    '#251D34',
      '--wax':          '#BC6E5E',
      '--wax-soft':     '#5C2A22',
      '--wax-wash':     '#2E1612',
    },
  },

  foolscap: {
    label: 'Foolscap - typewriter',
    sub: 'Mono throughout. Watson speaks in a Courier voice; data widgets stay tabular.',
    vars: {
      '--serif':        "'JetBrains Mono', 'SF Mono', Menlo, monospace",
      '--sans':         "'JetBrains Mono', 'SF Mono', Menlo, monospace",
      '--parchment':    '#F2ECDC',
      '--parchment-2':  '#E8E0CB',
      '--paper':        '#F8F3E4',
      '--ink':          '#1A1A1A',
      '--ink-soft':     '#3A3A3A',
      '--ink-mute':     '#6A6A6A',
      '--brick':        '#8E2A1F',
      '--mustard':      '#8C6710',
      '--teal':         '#2C5957',
      '--plum':         '#5C3F66',
      '--wax':          '#7A1C0F',
    },
  },
};

function Themed({ themeKey, children }) {
  const t = VARIANT_THEMES[themeKey];
  return (
    <div
      data-theme={themeKey}
      style={{
        width: '100%', height: '100%',
        background: 'var(--parchment)',
        ...t.vars,
      }}
    >
      {children}
    </div>
  );
}

// Small swatch strip for theme cards
function ThemeSwatch({ themeKey }) {
  const t = VARIANT_THEMES[themeKey];
  const samples = ['--parchment', '--paper', '--ink', '--brick', '--mustard', '--teal', '--plum', '--wax'];
  return (
    <div style={{ display: 'flex', gap: 0, ...t.vars }}>
      {samples.map(k => (
        <div key={k} style={{
          width: 22, height: 22,
          background: `var(${k})`,
          border: '1px solid rgba(0,0,0,0.05)',
        }} />
      ))}
    </div>
  );
}

window.VARIANT_THEMES = VARIANT_THEMES;
window.Themed = Themed;
window.ThemeSwatch = ThemeSwatch;