// Tweaks panel — in-design controls

function TweaksPanel({ tweaks, setTweaks, theme, accent }) {
  const [open, setOpen] = React.useState(false);
  const [editMode, setEditMode] = React.useState(() => {
    try {
      const p = new URLSearchParams(location.search);
      return p.has('edit') || location.hash === '#edit';
    } catch (_) { return false; }
  });

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') { setEditMode(false); setOpen(false); }
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  if (!editMode) return null;

  const set = (k, v) => {
    const edits = { [k]: v };
    setTweaks(edits);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
  };

  return (
    <div style={{ position: 'fixed', right: 20, bottom: 20, zIndex: 200, fontFamily: FONTS.ui }}>
      {!open && (
        <button onClick={() => setOpen(true)} style={{
          background: theme.text, color: theme.bg,
          border: 'none', borderRadius: 999,
          padding: '11px 16px',
          fontSize: 12.5, fontWeight: 600,
          cursor: 'pointer', boxShadow: '0 8px 20px rgba(0,0,0,0.25)',
          display: 'flex', alignItems: 'center', gap: 7,
        }}>
          <Ico.sparkle size={13} stroke={theme.bg} sw={2}/> Tweaks
        </button>
      )}
      {open && (
        <div style={{
          width: 280, background: theme.surface,
          border: `0.5px solid ${theme.line2}`,
          borderRadius: 18, padding: 16,
          boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
          color: theme.text,
        }}>
          <div style={{ display: 'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 }}>
            <div style={{ fontFamily: FONTS.display, fontSize: 15 }}>Tweaks</div>
            <button onClick={() => setOpen(false)} style={{ background:'transparent', border:'none', color: theme.textMute, cursor: 'pointer' }}>
              <Ico.close size={14}/>
            </button>
          </div>

          <TweakRow label="Theme" theme={theme}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 14, background: theme.accentOverride, border: `0.5px solid ${theme.line2}` }}/>
              <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, letterSpacing: 0.3 }}>Clinic · electric blue</span>
            </div>
          </TweakRow>

          <TweakRow label="Arabic in wordmark" theme={theme}>
            <button onClick={() => set('showArabic', !tweaks.showArabic)} style={{
              width: 40, height: 22, borderRadius: 11, position: 'relative',
              background: tweaks.showArabic ? accent : theme.surface3,
              border: 'none', cursor: 'pointer', transition: 'background 160ms',
            }}>
              <div style={{
                position: 'absolute', top: 2, left: tweaks.showArabic ? 20 : 2,
                width: 18, height: 18, borderRadius: 9, background: '#fff',
                transition: 'left 160ms',
              }}/>
            </button>
          </TweakRow>

          <TweakRow label="Inspect (hover to copy path)" theme={theme}>
            <button onClick={() => set('inspect', !tweaks.inspect)} style={{
              width: 40, height: 22, borderRadius: 11, position: 'relative',
              background: tweaks.inspect ? accent : theme.surface3,
              border: 'none', cursor: 'pointer', transition: 'background 160ms',
            }}>
              <div style={{
                position: 'absolute', top: 2, left: tweaks.inspect ? 20 : 2,
                width: 18, height: 18, borderRadius: 9, background: '#fff',
                transition: 'left 160ms',
              }}/>
            </button>
          </TweakRow>

          <TweakRow label="Screen" theme={theme}>
            <select value={tweaks.screen} onChange={e => set('screen', e.target.value)} style={{
              width: '100%', padding: '6px 8px', borderRadius: 8,
              background: theme.surface2, color: theme.text,
              border: `0.5px solid ${theme.line2}`,
              fontSize: 11, fontFamily: FONTS.ui,
            }}>
              <option value="home">Home</option>
              <option value="assets">Wealth</option>
              <option value="chat">Ask Himma</option>
              <option value="tx">Activity</option>
              <option value="recs">Insights</option>
              <option value="goal_detail">Goal detail</option>
              <option value="paywall">Paywall</option>
              <option value="settings">Settings</option>
              <option value="notifications">Inbox</option>
              <option value="subscription">Subscription</option>
            </select>
          </TweakRow>
        </div>
      )}
    </div>
  );
}

function TweakRow({ label, children, theme }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ fontFamily: FONTS.mono, fontSize: 9.5, color: theme.textMute, textTransform:'uppercase', letterSpacing: 1, marginBottom: 7 }}>{label}</div>
      {children}
    </div>
  );
}

Object.assign(window, { TweaksPanel });