// Settings screen — app preferences.

function SettingsScreen({ tweaks, onTweaksChange }) {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: HUUL_TOKENS.color.bg }}>
      <div style={{ padding: '54px 16px 8px' }}>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.5 }}>Settings</div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '10px 16px 100px' }}>

        <SettingsSection title="Profile">
          <SettingsRow label="Page layout">
            <SegControl
              options={[{ label: 'Bento', value: 'bento' }, { label: 'Stacked', value: 'stacked' }]}
              value={tweaks.profileLayout}
              onChange={(v) => onTweaksChange({ profileLayout: v })}
            />
          </SettingsRow>
        </SettingsSection>

        <SettingsSection title="Shop">
          <SettingsRow label="Product card style">
            <SegControl
              options={[
                { label: 'Grid',  value: 'grid2'     },
                { label: 'List',  value: 'list'      },
                { label: 'Cover', value: 'immersive' },
              ]}
              value={tweaks.cardLayout}
              onChange={(v) => onTweaksChange({ cardLayout: v })}
            />
          </SettingsRow>
        </SettingsSection>

      </div>
    </div>
  );
}

function SettingsSection({ title, children }) {
  return (
    <div style={{ marginBottom: 24 }}>
      <div style={{
        fontSize: 12, fontWeight: 600, color: HUUL_TOKENS.color.ink3,
        textTransform: 'uppercase', letterSpacing: 0.6,
        marginBottom: 8, paddingLeft: 4,
      }}>{title}</div>
      <div style={{ background: '#fff', borderRadius: 18, boxShadow: HUUL_TOKENS.shadow.card, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

function SettingsRow({ label, children }) {
  return (
    <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ fontSize: 15, fontWeight: 500 }}>{label}</div>
      {children}
    </div>
  );
}

function SegControl({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', background: 'rgba(0,0,0,0.04)', borderRadius: 10, padding: 3 }}>
      {options.map(o => (
        <button key={o.value} onClick={() => onChange(o.value)} style={{
          flex: 1, border: 'none', borderRadius: 8, padding: '8px 6px',
          fontSize: 13, fontWeight: 500,
          background: value === o.value ? '#fff' : 'transparent',
          color: value === o.value ? HUUL_TOKENS.color.ink : HUUL_TOKENS.color.ink2,
          boxShadow: value === o.value ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
          cursor: 'pointer', fontFamily: HUUL_TOKENS.font.stack,
          transition: 'background 140ms, color 140ms',
        }}>{o.label}</button>
      ))}
    </div>
  );
}

window.SettingsScreen = SettingsScreen;