// parlour-theme.jsx — shared theme tokens + store/Studio config.
// Single source of truth for The Vermilion Parlour storefront theming.
// Exports to window: MK_STORE_KEY, MK_SEALS, MK_TITLE_FONTS, MK_BODY_FONTS,
//   MK_DEFAULTS, MK_BG_SWATCHES, MK_INK_SWATCHES, MK_BRUSH_SWATCHES,
//   MK_BUTTON_SWATCHES, MK_PRESETS, mkIsLight, mkLoadTheme, mkSaveTheme,
//   mkResolve, useMKTheme.

const MK_STORE_KEY = 'mk-theme-v1';

const MK_TITLE_FONTS = {
  'Playfair Display': '"Playfair Display", Georgia, serif',
  'Cormorant Garamond': '"Cormorant Garamond", Georgia, serif',
  'Jost': '"Jost", system-ui, sans-serif',
  'Space Grotesk': '"Space Grotesk", system-ui, sans-serif',
  'Quicksand': '"Quicksand", system-ui, sans-serif',
};
const MK_BODY_FONTS = {
  'Jost': '"Jost", system-ui, sans-serif',
  'Space Grotesk': '"Space Grotesk", system-ui, sans-serif',
  'Cormorant Garamond': '"Cormorant Garamond", Georgia, serif',
  'Quicksand': '"Quicksand", system-ui, sans-serif',
  'Space Mono': '"Space Mono", ui-monospace, monospace',
};
const MK_SEALS = {
  Vermilion: { fill: '#a82318', ink: '#f3ece0' },
  Gold:      { fill: '#9a7b2e', ink: '#fbf3df' },
  Ink:       { fill: '#26231d', ink: '#f3ece0' },
  Cream:     { fill: '#f3ece0', ink: '#a82318' },
  Jade:      { fill: '#0e3b32', ink: '#eaf3ee' },
  Plum:      { fill: '#5a2148', ink: '#f4e7ef' },
};

const MK_BG_SWATCHES = ['#f3ece0', '#f8f4ec', '#ece0cc', '#e9efe8', '#f4e7e3', '#e6edf4', '#181712', '#14130f', '#0e2c25', '#2a1110', '#11182b', '#241522'];
const MK_INK_SWATCHES = ['#7a2117', '#a82318', '#1f1c18', '#0e3b32', '#9a7b2e', '#5a2148', '#1f3a6b', '#2b2620', '#126b6b', '#f3ece0'];
const MK_BRUSH_SWATCHES = ['#26231d', '#7a2117', '#9a7b2e', '#0e3b32', '#5a2148', '#f3ece0'];
const MK_BUTTON_SWATCHES = ['#7a2117', '#a82318', '#9a7b2e', '#0e3b32', '#2b2620', '#5a2148'];

const MK_DEFAULTS = {
  background: '#f3ece0', accent: '#7a2117', enso: '#26231d', seal: 'Vermilion',
  titleFont: 'Playfair Display', bodyFont: 'Jost', button: '#7a2117', brackets: true,
};

const MK_PRESETS = [
  { name: 'Cinnabar on Rice', t: { background: '#f3ece0', accent: '#7a2117', enso: '#26231d', seal: 'Vermilion', button: '#7a2117', titleFont: 'Playfair Display', bodyFont: 'Jost' } },
  { name: 'Imperial', t: { background: '#181712', accent: '#9a7b2e', enso: '#9a7b2e', seal: 'Gold', button: '#9a7b2e', titleFont: 'Playfair Display', bodyFont: 'Jost' } },
  { name: 'Jade Parlour', t: { background: '#f3ece0', accent: '#0e3b32', enso: '#0e3b32', seal: 'Jade', button: '#0e3b32', titleFont: 'Cormorant Garamond', bodyFont: 'Jost' } },
  { name: 'Midnight Plum', t: { background: '#241522', accent: '#f3ece0', enso: '#9a7b2e', seal: 'Plum', button: '#5a2148', titleFont: 'Playfair Display', bodyFont: 'Space Grotesk' } },
];

function mkIsLight(hex) {
  const h = (hex || '#000').replace('#', '');
  if (h.length < 6) return true;
  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
  return (0.299 * r + 0.587 * g + 0.114 * b) > 150;
}

function mkLoadTheme() {
  try { return { ...MK_DEFAULTS, ...(JSON.parse(localStorage.getItem(MK_STORE_KEY) || '{}')) }; }
  catch { return { ...MK_DEFAULTS }; }
}
function mkSaveTheme(raw) {
  try { localStorage.setItem(MK_STORE_KEY, JSON.stringify(raw)); } catch {}
  try { window.dispatchEvent(new CustomEvent('mk-theme-change', { detail: raw })); } catch {}
}

// Resolve a raw theme into ready-to-use CSS tokens.
function mkResolve(raw) {
  const r = { ...MK_DEFAULTS, ...(raw || {}) };
  const light = mkIsLight(r.background);
  const seal = MK_SEALS[r.seal] || MK_SEALS.Vermilion;
  const btn = r.button || r.accent;
  return {
    raw: r,
    light,
    bg: `linear-gradient(170deg, ${r.background}, color-mix(in srgb, ${r.background} 90%, #000))`,
    bgFlat: r.background,
    panel: light ? 'color-mix(in srgb, ' + r.background + ' 60%, #fff)' : 'rgba(255,255,255,0.05)',
    cardBg: light ? 'rgba(0,0,0,0.015)' : 'rgba(255,255,255,0.045)',
    accent: r.accent,
    soft: `color-mix(in srgb, ${r.accent} 66%, transparent)`,
    line: `color-mix(in srgb, ${r.accent} 30%, transparent)`,
    faint: `color-mix(in srgb, ${r.accent} 12%, transparent)`,
    ensoColor: r.enso,
    sealFill: seal.fill,
    sealInk: seal.ink,
    button: btn,
    buttonText: mkIsLight(btn) ? '#26231d' : '#f5efe2',
    brackets: r.brackets !== false,
    titleFont: MK_TITLE_FONTS[r.titleFont] || MK_TITLE_FONTS['Playfair Display'],
    bodyFont: MK_BODY_FONTS[r.bodyFont] || MK_BODY_FONTS['Jost'],
    tileInk: '#23202b',
  };
}

// Hook: live theme that reacts to Studio saves (same tab via custom event,
// other tabs via storage event).
function useMKTheme() {
  const [raw, setRaw] = React.useState(() => mkLoadTheme());
  React.useEffect(() => {
    const onChange = () => setRaw(mkLoadTheme());
    window.addEventListener('storage', onChange);
    window.addEventListener('mk-theme-change', onChange);
    return () => { window.removeEventListener('storage', onChange); window.removeEventListener('mk-theme-change', onChange); };
  }, []);
  return [raw, mkResolve(raw), setRaw];
}

Object.assign(window, {
  MK_STORE_KEY, MK_SEALS, MK_TITLE_FONTS, MK_BODY_FONTS, MK_DEFAULTS,
  MK_BG_SWATCHES, MK_INK_SWATCHES, MK_BRUSH_SWATCHES, MK_BUTTON_SWATCHES, MK_PRESETS,
  mkIsLight, mkLoadTheme, mkSaveTheme, mkResolve, useMKTheme,
});