// Lightweight tweak panel — accent + sector + route quick-jumps.
// Not required for production; useful for demo/QA.

function useTweaks(defaults) {
  const [state, setState] = React.useState(defaults);
  const set = (key, value) => setState(s => ({ ...s, [key]: value }));
  return [state, set];
}

function TweaksPanel({ children }) {
  const [open, setOpen] = React.useState(false);
  const isMobile = useMedia ? useMedia('(max-width: 600px)') : false;
  if (isMobile) return null; // Hide the dev panel on small screens

  return (
    <>
      {!open && (
        <button
          onClick={() => setOpen(true)}
          style={{
            position: 'fixed', left: 20, bottom: 20, zIndex: 40,
            padding: '8px 12px', borderRadius: 8, fontSize: 11,
            fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase',
            background: 'rgba(21,19,14,0.75)', color: 'var(--paper)',
            border: 0, backdropFilter: 'blur(6px)', cursor: 'pointer',
          }}
        >Tweaks</button>
      )}
      {open && (
        <div style={{
          position: 'fixed', left: 20, bottom: 20, zIndex: 40,
          width: 260, padding: 14, borderRadius: 12,
          background: 'var(--paper)', border: '.5px solid var(--line-2)',
          boxShadow: 'var(--shadow-md)', display: 'flex', flexDirection: 'column', gap: 10,
          fontSize: 12,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)' }}>Dev tweaks</span>
            <button onClick={() => setOpen(false)} style={{ background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--muted)' }}>×</button>
          </div>
          {children}
        </div>
      )}
    </>
  );
}

const TweakSection = ({ label }) => (
  <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 4 }}>{label}</div>
);

const TweakColor = ({ label, value, onChange }) => (
  <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span>{label}</span>
    <input type="color" value={value} onChange={(e) => onChange(e.target.value)}
      style={{ width: 28, height: 28, borderRadius: 6, border: '.5px solid var(--line-2)', background: 'transparent', cursor: 'pointer' }}
    />
  </label>
);

const TweakSelect = ({ label, value, onChange, options }) => (
  <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <span>{label}</span>
    <select value={value} onChange={(e) => onChange(e.target.value)}
      style={{ padding: '4px 6px', fontFamily: 'inherit', border: '.5px solid var(--line-2)', borderRadius: 6, background: 'var(--bg-2)' }}
    >
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  </label>
);

const TweakToggle = ({ label, value, onChange }) => (
  <label style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}>
    <span>{label}</span>
    <input type="checkbox" checked={value} onChange={(e) => onChange(e.target.checked)} />
  </label>
);

const TweakButton = ({ children, onClick }) => (
  <button onClick={onClick} style={{
    padding: '6px 10px', fontSize: 11, fontFamily: 'inherit',
    background: 'var(--bg-2)', border: '.5px solid var(--line-2)', borderRadius: 6, cursor: 'pointer',
  }}>{children}</button>
);

Object.assign(window, { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakSelect, TweakToggle, TweakButton });