/* Palette tweaks — curated dark palettes for pgpilot landing */

const PALETTES = {
  mint: {
    name: 'Mint',
    swatch: ['#1c2229', '#a3edc6', '#f5f3ec'],
    vars: {
      '--bg':            'oklch(0.145 0.012 250)',
      '--bg-2':          'oklch(0.175 0.014 250)',
      '--surface':       'oklch(0.205 0.015 250)',
      '--border':        'oklch(0.28 0.018 250)',
      '--border-strong': 'oklch(0.38 0.02 250)',
      '--fg':            'oklch(0.97 0.005 95)',
      '--fg-2':          'oklch(0.78 0.008 250)',
      '--muted':         'oklch(0.6 0.012 250)',
      '--dim':           'oklch(0.45 0.015 250)',
      '--accent':        'oklch(0.84 0.18 152)',
      '--accent-2':      'oklch(0.74 0.17 152)',
      '--accent-soft':   'oklch(0.84 0.18 152 / 0.12)',
      '--accent-glow':   'oklch(0.84 0.18 152 / 0.35)',
    },
  },
  amber: {
    name: 'Ember',
    swatch: ['#1f1a14', '#f5b14a', '#f5efe4'],
    vars: {
      '--bg':            'oklch(0.145 0.012 60)',
      '--bg-2':          'oklch(0.175 0.014 60)',
      '--surface':       'oklch(0.205 0.015 60)',
      '--border':        'oklch(0.28 0.018 60)',
      '--border-strong': 'oklch(0.38 0.02 60)',
      '--fg':            'oklch(0.97 0.008 80)',
      '--fg-2':          'oklch(0.78 0.012 70)',
      '--muted':         'oklch(0.6 0.014 65)',
      '--dim':           'oklch(0.45 0.015 65)',
      '--accent':        'oklch(0.82 0.15 75)',
      '--accent-2':      'oklch(0.72 0.14 75)',
      '--accent-soft':   'oklch(0.82 0.15 75 / 0.13)',
      '--accent-glow':   'oklch(0.82 0.15 75 / 0.4)',
    },
  },
  cyan: {
    name: 'Cyan',
    swatch: ['#10171c', '#5fdcee', '#eef2f6'],
    vars: {
      '--bg':            'oklch(0.135 0.014 220)',
      '--bg-2':          'oklch(0.17 0.016 220)',
      '--surface':       'oklch(0.2 0.018 220)',
      '--border':        'oklch(0.28 0.02 220)',
      '--border-strong': 'oklch(0.38 0.022 220)',
      '--fg':            'oklch(0.97 0.005 220)',
      '--fg-2':          'oklch(0.78 0.012 220)',
      '--muted':         'oklch(0.6 0.014 220)',
      '--dim':           'oklch(0.45 0.015 220)',
      '--accent':        'oklch(0.83 0.14 210)',
      '--accent-2':      'oklch(0.73 0.13 210)',
      '--accent-soft':   'oklch(0.83 0.14 210 / 0.12)',
      '--accent-glow':   'oklch(0.83 0.14 210 / 0.4)',
    },
  },
  violet: {
    name: 'Violet',
    swatch: ['#161420', '#c9a4ff', '#f3eff8'],
    vars: {
      '--bg':            'oklch(0.14 0.016 290)',
      '--bg-2':          'oklch(0.175 0.018 290)',
      '--surface':       'oklch(0.205 0.02 290)',
      '--border':        'oklch(0.28 0.022 290)',
      '--border-strong': 'oklch(0.38 0.025 290)',
      '--fg':            'oklch(0.97 0.006 290)',
      '--fg-2':          'oklch(0.78 0.012 290)',
      '--muted':         'oklch(0.6 0.015 290)',
      '--dim':           'oklch(0.45 0.018 290)',
      '--accent':        'oklch(0.8 0.14 300)',
      '--accent-2':      'oklch(0.7 0.13 300)',
      '--accent-soft':   'oklch(0.8 0.14 300 / 0.13)',
      '--accent-glow':   'oklch(0.8 0.14 300 / 0.4)',
    },
  },
  rose: {
    name: 'Rose',
    swatch: ['#1d1418', '#ff9aae', '#f6eef0'],
    vars: {
      '--bg':            'oklch(0.14 0.014 15)',
      '--bg-2':          'oklch(0.175 0.016 15)',
      '--surface':       'oklch(0.205 0.018 15)',
      '--border':        'oklch(0.28 0.02 15)',
      '--border-strong': 'oklch(0.38 0.022 15)',
      '--fg':            'oklch(0.97 0.005 30)',
      '--fg-2':          'oklch(0.78 0.012 15)',
      '--muted':         'oklch(0.6 0.014 15)',
      '--dim':           'oklch(0.45 0.016 15)',
      '--accent':        'oklch(0.78 0.16 15)',
      '--accent-2':      'oklch(0.68 0.15 15)',
      '--accent-soft':   'oklch(0.78 0.16 15 / 0.13)',
      '--accent-glow':   'oklch(0.78 0.16 15 / 0.4)',
    },
  },
  bone: {
    name: 'Bone',
    swatch: ['#f4f1ea', '#1a1a1a', '#3d6b4a'],
    vars: {
      '--bg':            'oklch(0.96 0.008 80)',
      '--bg-2':          'oklch(0.93 0.01 80)',
      '--surface':       'oklch(0.9 0.012 80)',
      '--border':        'oklch(0.82 0.014 80)',
      '--border-strong': 'oklch(0.72 0.016 80)',
      '--fg':            'oklch(0.2 0.008 80)',
      '--fg-2':          'oklch(0.4 0.01 80)',
      '--muted':         'oklch(0.55 0.012 80)',
      '--dim':           'oklch(0.7 0.014 80)',
      '--accent':        'oklch(0.52 0.13 150)',
      '--accent-2':      'oklch(0.42 0.12 150)',
      '--accent-soft':   'oklch(0.52 0.13 150 / 0.12)',
      '--accent-glow':   'oklch(0.52 0.13 150 / 0.3)',
    },
  },
};

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.mint;
  const root = document.documentElement;
  Object.entries(p.vars).forEach(([k, v]) => root.style.setProperty(k, v));
}

// Custom palette grid control (richer than TweakColor for full-theme swatches)
function PaletteGrid({ value, onChange }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 6,
      width: '100%',
    }}>
      {Object.entries(PALETTES).map(([key, p]) => {
        const isActive = value === key;
        return (
          <button
            key={key}
            onClick={() => onChange(key)}
            style={{
              appearance: 'none',
              padding: 6,
              borderRadius: 8,
              border: isActive ? '1.5px solid rgba(41,38,27,.5)' : '.5px solid rgba(0,0,0,.12)',
              background: isActive ? 'rgba(255,255,255,.9)' : 'rgba(255,255,255,.5)',
              cursor: 'pointer',
              display: 'flex',
              flexDirection: 'column',
              gap: 4,
              alignItems: 'stretch',
            }}
          >
            <div style={{
              display: 'flex',
              gap: 2,
              height: 22,
              borderRadius: 4,
              overflow: 'hidden',
            }}>
              {p.swatch.map((c, i) => (
                <div key={i} style={{ flex: i === 1 ? 2 : 1, background: c }} />
              ))}
            </div>
            <span style={{
              fontSize: 10,
              fontWeight: 500,
              color: 'rgba(41,38,27,.7)',
              textAlign: 'left',
            }}>{p.name}</span>
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { PALETTES, applyPalette, PaletteGrid });