/**
 * Bespoke chart themes for the landing's Theme Builder demo — looks that are
 * NOT in the built-in preset roster, to show what the Theme Builder produces
 * beyond the canned presets: custom palettes, custom fonts, and grid/background
 * styling.
 *
 * Each is shaped as the resolver expects (`Pick<CustomTheme, 'id' | 'config'>`),
 * so the demo applies them through the real
 * `chartConfigForSelection('custom:<id>', …)` path — exactly how a user's saved
 * theme is injected. Fonts are drawn from the chart-font roster (chart-fonts.css,
 * imported by the landing entry); the render path loads the faces before it
 * measures text. Vega-Lite's top-level `font` sets the default for all text; the
 * per-component `*Font` slots override it where a different face is wanted.
 */

import type { JsonObject } from '@core/spec-config';

// Serif display titles over a serif body on warm paper — a magazine look.
const EDITORIAL: JsonObject = {
  background: '#faf7f0',
  font: '"Spectral", Georgia, serif',
  title: {
    font: '"Playfair Display", Georgia, serif',
    fontSize: 18,
    fontWeight: 700,
    color: '#2b2419',
    subtitleFont: '"Spectral", Georgia, serif',
    subtitleColor: '#6b5d44',
  },
  axis: {
    labelFont: '"Spectral", Georgia, serif',
    titleFont: '"Spectral", Georgia, serif',
    labelColor: '#6b5d44',
    titleColor: '#3a3326',
    gridColor: '#e8dec9',
    domainColor: '#b8ab8a',
    tickColor: '#b8ab8a',
  },
  legend: {
    labelFont: '"Spectral", Georgia, serif',
    titleFont: '"Spectral", Georgia, serif',
    labelColor: '#6b5d44',
    titleColor: '#3a3326',
  },
  view: { stroke: 'transparent' },
  // Mark styling lives in the theme (not the shared specs), so the demo charts
  // stay rich while the Theme Builder gallery reflects its own config.
  point: { filled: true, size: 55 },
  line: { strokeWidth: 2.5 },
  range: {
    category: ['#7a5c3e', '#b07d3e', '#c9a14a', '#5e6b3f', '#9a5a44', '#46544c'],
    ramp: ['#f0e6d2', '#b07d3e', '#5e3a1e'],
  },
};

// Monospace, dashed grid, cool blues — a technical drawing.
const BLUEPRINT: JsonObject = {
  background: '#f5f8fc',
  font: '"Space Mono", ui-monospace, monospace',
  title: {
    font: '"Space Mono", ui-monospace, monospace',
    fontSize: 13,
    fontWeight: 700,
    color: '#10314f',
  },
  axis: {
    labelFont: '"Space Mono", ui-monospace, monospace',
    titleFont: '"Space Mono", ui-monospace, monospace',
    labelColor: '#3a5a78',
    titleColor: '#10314f',
    grid: true,
    gridColor: '#cdd9e5',
    gridDash: [2, 2],
    domainColor: '#10314f',
    tickColor: '#10314f',
  },
  legend: {
    labelFont: '"Space Mono", ui-monospace, monospace',
    titleFont: '"Space Mono", ui-monospace, monospace',
    labelColor: '#3a5a78',
    titleColor: '#10314f',
  },
  view: { stroke: '#cdd9e5' },
  point: { filled: false, size: 45, strokeWidth: 1.5 },
  line: { strokeWidth: 2, point: true },
  range: {
    category: ['#0d6fb8', '#3aa0d1', '#7cc4e0', '#0d3b66', '#5a8fb3', '#9ec9e0'],
    ramp: ['#e3eef7', '#3aa0d1', '#0d3b66'],
  },
};

// A hot, saturated palette over warm white — vivid and modern.
const SUNSET: JsonObject = {
  background: '#fff8f3',
  font: '"Inter", system-ui, sans-serif',
  title: {
    font: '"Inter", system-ui, sans-serif',
    fontSize: 15,
    fontWeight: 600,
    color: '#3a2233',
  },
  axis: {
    labelFont: '"Inter", system-ui, sans-serif',
    titleFont: '"Inter", system-ui, sans-serif',
    labelColor: '#7a5c4f',
    titleColor: '#3a2233',
    gridColor: '#f3e2d6',
    domainColor: '#d6a98f',
    tickColor: '#d6a98f',
  },
  legend: {
    labelFont: '"Inter", system-ui, sans-serif',
    titleFont: '"Inter", system-ui, sans-serif',
    labelColor: '#7a5c4f',
    titleColor: '#3a2233',
  },
  view: { stroke: 'transparent' },
  point: { filled: true, size: 70 },
  line: { strokeWidth: 3 },
  range: {
    category: ['#ff6b6b', '#f06595', '#cc5de8', '#845ef7', '#ff922b', '#fcc419'],
    ramp: ['#ffe3c9', '#ff922b', '#cc5de8'],
  },
};

export interface DemoTheme {
  /** Selection id used with `chartConfigForSelection` (resolved as `custom:<id>`). */
  id: number;
  /** Picker label. */
  label: string;
  /** The Vega-Lite config injected when this theme is selected. */
  config: JsonObject;
}

export const DEMO_CUSTOM_THEMES: ReadonlyArray<DemoTheme> = [
  { id: 1, label: 'Editorial', config: EDITORIAL },
  { id: 2, label: 'Blueprint', config: BLUEPRINT },
  { id: 3, label: 'Sunset', config: SUNSET },
];
