// Dev-only tweaks panel — shown when URL contains ?tweaks=1
// Example: http://localhost:3000/?tweaks=1

function TweaksPanel({ config, setConfig }) {
  const [open, setOpen] = React.useState(true);

  const field = (label, key, type = 'text') => (
    <label key={key} className="flex flex-col gap-1"
      style={{ fontSize: 11, color: '#374151' }}>
      <span style={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
        {label}
      </span>
      <input
        type={type}
        value={config[key]}
        onChange={e => {
          const val = e.target.value;
          setConfig(prev => {
            const next = { ...prev, [key]: val };
            if (key === 'accent') {
              document.documentElement.style.setProperty('--accent', val);
            }
            return next;
          });
        }}
        style={{
          border: '1px solid #D1D5DB',
          borderRadius: 6,
          padding: '4px 8px',
          fontFamily: 'monospace',
          fontSize: 11,
        }}
      />
    </label>
  );

  return (
    <div style={{
      position: 'fixed', bottom: 16, right: 16, zIndex: 9999,
      background: '#fff', border: '1px solid #E5E7EB',
      borderRadius: 10, boxShadow: '0 4px 20px rgba(0,0,0,0.10)',
      width: 260, fontFamily: 'monospace',
    }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', padding: '8px 12px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          background: '#F9FAFB', borderRadius: open ? '10px 10px 0 0' : 10,
          border: 'none', cursor: 'pointer', fontSize: 12, fontWeight: 600,
        }}
      >
        <span>Tweaks panel</span>
        <span>{open ? '▲' : '▼'}</span>
      </button>

      {open && (
        <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {field('Accent colour', 'accent', 'color')}
          {field('Phone', 'phone')}
          {field('Telegram link', 'telegram')}
          <p style={{ fontSize: 10, color: '#9CA3AF', marginTop: 4 }}>
            Changes are live. Not saved to disk.
          </p>
        </div>
      )}
    </div>
  );
}