// Tweaks: accent color and density

function TweaksPanel({ tweaks, onChange, onClose }) {
  const accents = [
    { id: 'purple', label: 'Electric Purple', a: '#a87bff', b: '#6f3dff' },
    { id: 'cyan', label: 'Cyber Cyan', a: '#5bd4ff', b: '#2b7dff' },
    { id: 'green', label: 'Neon Green', a: '#7df3a1', b: '#2fb56a' },
    { id: 'magenta', label: 'Hot Magenta', a: '#ff6dc1', b: '#cc2d87' },
    { id: 'amber', label: 'Amber', a: '#ffb45c', b: '#ff7a2c' },
  ];
  return (
    <div className="fixed bottom-5 right-5 z-50 w-[320px] glass rounded-2xl p-5 shadow-2xl" style={{ borderColor: 'var(--line-2)', background: 'rgba(12,12,20,0.95)' }}>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Icon name="sparkle" size={14} style={{ color: 'var(--accent)' }} />
          <span className="text-sm font-semibold">Tweaks</span>
        </div>
        <button onClick={onClose} className="text-white/40 hover:text-white"><Icon name="x" size={14} /></button>
      </div>

      <div className="mb-4">
        <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Accent</div>
        <div className="grid grid-cols-5 gap-2">
          {accents.map(c => (
            <button key={c.id} onClick={() => onChange({ accent: c.id })}
              className={`h-10 rounded-lg hairline relative transition-all ${tweaks.accent === c.id ? 'ring-2' : ''}`}
              style={{ background: `linear-gradient(135deg, ${c.a}, ${c.b})`, boxShadow: tweaks.accent === c.id ? `0 0 0 2px ${c.a}80` : 'none' }}
              title={c.label}
            >
              {tweaks.accent === c.id && <span className="absolute inset-0 flex items-center justify-center text-[#0b0320]"><Icon name="check" size={14} /></span>}
            </button>
          ))}
        </div>
      </div>

      <div className="mb-4">
        <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Ticker</div>
        <label className="flex items-center justify-between hairline rounded-lg px-3 py-2 cursor-pointer">
          <span className="text-sm">Show live orders ticker</span>
          <span className="relative w-9 h-5 rounded-full" style={{ background: tweaks.showTicker ? 'var(--accent)' : 'rgba(255,255,255,0.1)' }} onClick={() => onChange({ showTicker: !tweaks.showTicker })}>
            <span className="absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all" style={{ left: tweaks.showTicker ? '18px' : '2px' }} />
          </span>
        </label>
      </div>

      <div className="mb-4">
        <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Grid background</div>
        <label className="flex items-center justify-between hairline rounded-lg px-3 py-2 cursor-pointer">
          <span className="text-sm">Show grid overlay</span>
          <span className="relative w-9 h-5 rounded-full" style={{ background: tweaks.gridBg ? 'var(--accent)' : 'rgba(255,255,255,0.1)' }} onClick={() => onChange({ gridBg: !tweaks.gridBg })}>
            <span className="absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all" style={{ left: tweaks.gridBg ? '18px' : '2px' }} />
          </span>
        </label>
      </div>

      <div className="text-[11px] text-white/40 mono border-t pt-3" style={{ borderColor: 'var(--line)' }}>
        One-click accent swap. The whole interface restyles.
      </div>
    </div>
  );
}

const ACCENT_THEMES = {
  purple:  { a: '#a87bff', b: '#6f3dff', glow: 'rgba(168,123,255,0.25)' },
  cyan:    { a: '#5bd4ff', b: '#2b7dff', glow: 'rgba(91,212,255,0.25)' },
  green:   { a: '#7df3a1', b: '#2fb56a', glow: 'rgba(125,243,161,0.25)' },
  magenta: { a: '#ff6dc1', b: '#cc2d87', glow: 'rgba(255,109,193,0.25)' },
  amber:   { a: '#ffb45c', b: '#ff7a2c', glow: 'rgba(255,180,92,0.25)' },
};

function applyAccent(id) {
  const t = ACCENT_THEMES[id] || ACCENT_THEMES.purple;
  const r = document.documentElement;
  r.style.setProperty('--accent', t.a);
  r.style.setProperty('--accent-2', t.b);
  r.style.setProperty('--accent-glow', t.glow);
}

Object.assign(window, { TweaksPanel, applyAccent });